deck.js-codemirror

KO | EN

gitlite — search

#python #typescript #machine-learning #deep-learning #linux #macos #java #windows #cli #kubernetes #awesome-list #pytorch #mcp #open-source

deck.js-codemirror

(★ 107)

CodeMirror extension for deck.js

deck.js-codemirror 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Deprecated!

Recent changes to deck.js make this no longer usable. If you'd like to make a pull request to update this plugin, please do, otherwise don't use it.

Deck.js-CodeMirror Extension
============================

This extension allows you to embed codemirror code snippets in your slides. Those codeblocks
can also be executable, which is pretty exciting.

An example is running here: http://ireneros.com/deck/deck.js-codemirror/introduction

You can also see those slides in the `introduction` folder.

# 1.0.0rc #

Due to CodeMirror 3.0 being somewhat different, I've had to make a few adjustments to the plugin styling. You can test them on the [1.0.0rc](https://github.com/iros/deck.js-codemirror/tree/1.0.0rc) branch. Please submit issues if any exist, otherwise I will be merging this into master in the next few weeks.

## Upgrade notes ##
1. Be sure to include the additional `codemirror.css` file.

Thee rest should really behave itself.... I hope.
 
# Installation: #

Move all this into a folder called 'codemirror' in your deck.js/extensions/ folder.

# Setup: #

Include the stylesheet:

Include the JS source:

<script src="../extensions/codemirror/codemirror.js"></script>

<script src="../extensions/codemirror/mode/javascript/javascript.js"></script>

<script src="../extensions/codemirror/mode/xml/xml.js"></script>
    <script src="../extensions/codemirror/mode/css/css.js"></script>
    <script src="../extensions/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<script src="../extensions/codemirror/deck.codemirror.js"></script>

Include your favorite CodeMirror syntax style:

Options are:
    
    cobalt.css
    default.css
    elegant.css
    lesser-dark.css
    neat.css
    night.css

# Use: #

There are two ways to create code blocks:
Inside your slide:

## Text Area:

<div>
      <textarea id="code" name="code" class="code" mode="javascript" style="display: none;" runnable="true">// codemirror demo party!
        var greeter = function(name) {
          return "Why hello there " + name;
        }
        console.log(greeter("Joe"));
      </textarea>
    </div>
  
## Any other item:

<div>
      <div id="code" name="code" class="code" mode="javascript" style="display: none;">// codemirror demo party!
        var obj = { text : "Hello all!"};
        console.log("HI THERE");
      </div>
    </div>

# Setup scripts: #

Sometimes you have to do a lot of set up for your code that doesn't need to live inside
the actual codemirror editor (because it's not of interest to your readers.) You can now 
create hidden script tags that will be evaluated on "Run" before the editor code runs.

It must have the type set to "codemirror" and the data-selector must be set to the selector of
the editor that it's running for:

<textarea id="code4" name="code" class="code" mode="javascript" style="display: none;" runnable="true">
      // output my log
      console.log(someVar);
    </textarea>

# Cleanup scripts: #

Sometimes you just have to clean up the mess you made, or have something execute
after your code that the reader doesn't need to see. No problem! Add a cleanup script
as follows:

<textarea id="code4" name="code" class="code" mode="javascript" style="display: none;" runnable="true">
      var someVar = 10;
    </textarea>

# Globals! #

Sometimes you just need to access a global of some kind. The code in the codemirror editors is executed
in a sandbox, which means whatever it is you load in your actual slides, is NOT going to be available by default.
To give access to, for example, jQuery object, define a "globals" attribute on the code blocks with 
the names of the vars you need. Globals can be comma delimited, for example: "$,Backbone,_".

<textarea id="code4" name="code" class="code" mode="javascript" style="display: none;" runnable="true" globals="$">
      // output my log
      console.log($('script').size());
    </textarea>

# Element Attributes: #

Regardless of your element type, the following attributes should be set:

* class - code (should always be set to code.)
* mode  - language mode. This plugin now supports all modes. Look into the mode directory and include the ones you like. Note that some require additional modes so be sure to check the Codemirror site.
* theme (optional) - If you want multiple themes in your slides, include multiple stylesheets and set this attribute to the theme name.
* runnable (optiona) - If true, will add a Run button to the window and pipe the eval's console output to an output element right below.

# Contact: #
Irene Ros (@ireneros)
http://bocoup.com

# Contriburors: #
Much thanks to:

* @tbranyen (Tim Branyen)
* @Anks (Ankit Solanki)

deck.js-codemirror

deck.js-codemirror 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

deck.js-codemirror

deck.js-codemirror 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README