├── .gitignore ├── CONTRIBUTORS.txt ├── MIT-LICENSE.txt ├── README.md ├── VERSION.txt ├── codemirror.js ├── deck.codemirror.css ├── deck.codemirror.js ├── deck.codemirror.scss ├── introduction ├── index.html ├── introduction.css ├── introduction.js ├── introduction.scss └── modernizr.custom.js ├── mode ├── clike │ ├── clike.js │ └── index.html ├── clojure │ ├── clojure.js │ └── index.html ├── coffeescript │ ├── LICENSE │ ├── coffeescript.js │ └── index.html ├── css │ ├── css.js │ └── index.html ├── diff │ ├── diff.css │ ├── diff.js │ └── index.html ├── haskell │ ├── haskell.js │ └── index.html ├── htmlmixed │ ├── htmlmixed.js │ └── index.html ├── javascript │ ├── index.html │ └── javascript.js ├── lua │ ├── index.html │ └── lua.js ├── php │ ├── index.html │ └── php.js ├── plsql │ ├── index.html │ └── plsql.js ├── python │ ├── LICENSE.txt │ ├── index.html │ └── python.js ├── r │ ├── LICENSE │ ├── index.html │ └── r.js ├── rst │ ├── index.html │ ├── rst.css │ └── rst.js ├── ruby │ ├── LICENSE │ ├── index.html │ └── ruby.js ├── scheme │ ├── index.html │ └── scheme.js ├── smalltalk │ ├── index.html │ └── smalltalk.js ├── sparql │ ├── index.html │ └── sparql.js ├── stex │ ├── index.html │ └── stex.js ├── velocity │ ├── index.html │ └── velocity.js ├── xml │ ├── index.html │ └── xml.js ├── xmlpure │ ├── index.html │ └── xmlpure.js └── yaml │ ├── index.html │ └── yaml.js └── themes ├── cobalt.css ├── default.css ├── elegant.css ├── lesser-dark.css ├── neat.css └── night.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /CONTRIBUTORS.txt: -------------------------------------------------------------------------------- 1 | Irene Ros (iros) 2 | Tim Branyen (tbranyen) -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Irene Ros 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Deprecated! 2 | 3 | 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. 4 | 5 | Deck.js-CodeMirror Extension 6 | ============================ 7 | 8 | This extension allows you to embed codemirror code snippets in your slides. Those codeblocks 9 | can also be executable, which is pretty exciting. 10 | 11 | An example is running here: http://ireneros.com/deck/deck.js-codemirror/introduction 12 | 13 | You can also see those slides in the `introduction` folder. 14 | 15 | # 1.0.0rc # 16 | 17 | 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. 18 | 19 | ## Upgrade notes ## 20 | 1. Be sure to include the additional `codemirror.css` file. 21 | 22 | Thee rest should really behave itself.... I hope. 23 | 24 | # Installation: # 25 | 26 | Move all this into a folder called 'codemirror' in your deck.js/extensions/ folder. 27 | 28 | # Setup: # 29 | 30 | Include the stylesheet: 31 | 32 | 33 | 34 | Include the JS source: 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | Include your favorite CodeMirror syntax style: 53 | 54 | 55 | 56 | Options are: 57 | 58 | cobalt.css 59 | default.css 60 | elegant.css 61 | lesser-dark.css 62 | neat.css 63 | night.css 64 | 65 | 66 | # Use: # 67 | 68 | There are two ways to create code blocks: 69 | Inside your slide: 70 | 71 | ## Text Area: 72 | 73 |
74 | 80 |
81 | 82 | ## Any other item: 83 | 84 |
85 | 89 |
90 | 91 | # Setup scripts: # 92 | 93 | Sometimes you have to do a lot of set up for your code that doesn't need to live inside 94 | the actual codemirror editor (because it's not of interest to your readers.) You can now 95 | create hidden script tags that will be evaluated on "Run" before the editor code runs. 96 | 97 | It must have the type set to "codemirror" and the data-selector must be set to the selector of 98 | the editor that it's running for: 99 | 100 | 103 | 104 | 108 | 109 | # Cleanup scripts: # 110 | 111 | Sometimes you just have to clean up the mess you made, or have something execute 112 | after your code that the reader doesn't need to see. No problem! Add a cleanup script 113 | as follows: 114 | 115 | 121 | 122 | 125 | 126 | # Globals! # 127 | 128 | Sometimes you just need to access a global of some kind. The code in the codemirror editors is executed 129 | in a sandbox, which means whatever it is you load in your actual slides, is NOT going to be available by default. 130 | To give access to, for example, jQuery object, define a "globals" attribute on the code blocks with 131 | the names of the vars you need. Globals can be comma delimited, for example: "$,Backbone,_". 132 | 133 | 137 | 138 | # Element Attributes: # 139 | 140 | Regardless of your element type, the following attributes should be set: 141 | 142 | * class - code (should always be set to code.) 143 | * 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. 144 | * theme (optional) - If you want multiple themes in your slides, include multiple stylesheets and set this attribute to the theme name. 145 | * 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. 146 | 147 | # Contact: # 148 | Irene Ros (@ireneros) 149 | http://bocoup.com 150 | 151 | # Contriburors: # 152 | Much thanks to: 153 | 154 | * @tbranyen (Tim Branyen) 155 | * @Anks (Ankit Solanki) 156 | 157 | 158 | -------------------------------------------------------------------------------- /VERSION.txt: -------------------------------------------------------------------------------- 1 | 0.0.6 2 | -------------------------------------------------------------------------------- /deck.codemirror.css: -------------------------------------------------------------------------------- 1 | .deck-container .slide { 2 | font-weight: normal; } 3 | .deck-container .slide .deck-codemirror-result { 4 | border: 1px solid #ddd; 5 | border-top: none; 6 | padding: 10px; 7 | font-family: monospace; } 8 | .deck-container .slide .CodeMirror { 9 | line-height: 1em; 10 | font-family: monospace; 11 | overflow: auto; 12 | height: 100%; 13 | border: 1px solid #ddd; } 14 | .deck-container .slide .CodeMirror .button { 15 | padding: 5px; 16 | cursor: pointer; 17 | background-color: #ddd; 18 | position: relative; 19 | float: right; 20 | font-size: 11px; 21 | line-height: 16px; 22 | padding: 2px 6px; 23 | margin-bottom: -20px; 24 | margin-right: 10px; 25 | border-radius: 4px; 26 | -moz-border-radius: 4px; 27 | -webkit-border-radius: 4px; 28 | z-index: 1; 29 | top: 8px; } 30 | .deck-container .slide .CodeMirror .button:hover { 31 | background-color: #eee; } 32 | .deck-container .slide .CodeMirror .button.clear { 33 | margin-right: 50px; } 34 | .deck-container .slide .CodeMirror-scroll { 35 | /* overflow: auto; */ 36 | /* This is needed to prevent an IE[67] bug where the scrolled content 37 | is visible outside of the scrolling box. */ 38 | position: relative; 39 | height: auto; 40 | overflow-y: hidden; 41 | overflow-x: auto; 42 | width: 100%; } 43 | .deck-container .slide .CodeMirror-gutter { 44 | position: absolute; 45 | left: 0; 46 | top: 0; 47 | z-index: 10; 48 | background-color: #f7f7f7; 49 | border-right: 1px solid #eee; 50 | min-width: 2em; 51 | height: 100%; } 52 | .deck-container .slide .CodeMirror-gutter-text { 53 | color: #aaa; 54 | text-align: right; 55 | padding: .4em .2em .4em .4em; } 56 | .deck-container .slide .CodeMirror-lines { 57 | padding: .4em; } 58 | .deck-container .slide .CodeMirror pre { 59 | -moz-border-radius: 0; 60 | -webkit-border-radius: 0; 61 | -o-border-radius: 0; 62 | border-radius: 0; 63 | border-width: 0; 64 | margin: 0; 65 | padding: 0; 66 | background: transparent; 67 | font-family: inherit; 68 | font-size: inherit; 69 | padding: 0; 70 | margin: 0; 71 | white-space: pre; 72 | word-wrap: normal; } 73 | .deck-container .slide .CodeMirror textarea { 74 | font-family: inherit !important; 75 | font-size: inherit !important; } 76 | .deck-container .slide .CodeMirror-cursor { 77 | z-index: 10; 78 | position: absolute; 79 | visibility: hidden; 80 | border-left: 1px solid black !important; } 81 | .deck-container .slide .CodeMirror-focused .CodeMirror-cursor { 82 | visibility: visible; } 83 | .deck-container .slide span.CodeMirror-selected { 84 | background: #ccc !important; 85 | color: HighlightText !important; } 86 | .deck-container .slide .CodeMirror-focused span.CodeMirror-selected { 87 | background: Highlight !important; } 88 | .deck-container .slide .CodeMirror-matchingbracket { 89 | color: #0f0 !important; } 90 | .deck-container .slide .CodeMirror-nonmatchingbracket { 91 | color: #f22 !important; } 92 | -------------------------------------------------------------------------------- /deck.codemirror.js: -------------------------------------------------------------------------------- 1 | /* 2 | This modules adds code mirror code rendering to items on the page that 3 | contain code. To enable it on your elements add the classname: 4 | .deck-codemirror to your container and the classname 'codemirror-item' 5 | to any block that you wish to codemirrorify. 6 | */ 7 | (function($, deck, undefined) { 8 | 9 | var $d = $(document); 10 | 11 | /* 12 | Extends defaults/options. 13 | 14 | options.classes.codemirror 15 | This class is added to the deck container when there is code in the 16 | slide that should be 17 | 18 | options.selectors.codemirror-item 19 | This class should be added to the element containing code that should 20 | be highlighted. 21 | */ 22 | $.extend(true, $[deck].defaults, { 23 | classes: { 24 | codemirror: 'deck-codemirror', 25 | codemirrorresult: 'deck-codemirror-result' 26 | }, 27 | 28 | selectors: { 29 | codemirroritem: '.code', 30 | }, 31 | 32 | data : { 33 | codemirrorified: 'codemirrorified' 34 | }, 35 | codemirror : { 36 | lineNumbers : true, 37 | theme : "default", 38 | mode : "javascript", 39 | theme : "default", 40 | indentUnit : 1, 41 | indentWithTabs : false, 42 | runnable : false 43 | } 44 | }); 45 | 46 | // flag to indicate that we are currently in the editor. Required to stop keypress 47 | // propagation to all other extensions. 48 | var inEditor = false; 49 | 50 | // a helper private function that can be used to "codemirror" a slide if that slide 51 | // has any elements with the proper classname. 52 | var codemirrorify = function(slide) { 53 | var $container = $[deck]('getContainer'), 54 | opts = $[deck]('getOptions'), 55 | codeblocks = $(slide).find(opts.selectors.codemirroritem), 56 | hiddenScripts = [], 57 | cleanupScripts = []; 58 | 59 | // Seek out and cache all hidden scripts 60 | $("script[type=codemirror]").each(function() { 61 | hiddenScripts.push({ 62 | selector: $(this).data("selector"), 63 | src: this.innerHTML 64 | }); 65 | }); 66 | 67 | // Seek out and cache all cleanup scripts 68 | $("script[type=\"codemirror/cleanup\"]").each(function() { 69 | cleanupScripts.push({ 70 | selector: $(this).data("selector"), 71 | src: this.innerHTML 72 | }); 73 | }); 74 | 75 | // go through all code blocks 76 | $.each(codeblocks, function(i, codeblock) { 77 | 78 | // if codeblock hasn't been codemirrorified yet 79 | if (!$.data(codeblock, opts.data.codemirrorified)) { 80 | 81 | // initialize defaults. 82 | var codeblock = $(codeblock), 83 | editor = null, 84 | options = $.extend(opts.codemirror, 85 | { 86 | mode : !!codeblock.attr('mode') ? codeblock.attr('mode') : opts.codemirror.mode, 87 | theme : !!codeblock.attr('theme') ? codeblock.attr('theme') : opts.codemirror.theme, 88 | onFocus : function(e) { 89 | inEditor = true; 90 | }, 91 | onBlur : function(e) { 92 | inEditor = false; 93 | } 94 | } 95 | ); 96 | 97 | // if this is a textarea just use the codemirror shorthand. 98 | if (codeblock.get(0).nodeName.toUpperCase() === "TEXTAREA") { 99 | editor = CodeMirror.fromTextArea(codeblock[0], options); 100 | } else { 101 | // else codemirror the element's content and attach to element parent. 102 | var parent = codeblock.parent(); 103 | codeblock.hide(); 104 | editor = CodeMirror(parent[0], 105 | $.extend(options, { 106 | value : codeblock.html() 107 | }) 108 | ); 109 | } 110 | 111 | // mark that this code block has been codemirrored. 112 | $.data(codeblock[0], opts.data.codemirrorified, 'true'); 113 | 114 | // attach a listener to this event to make sure that all other keybindings 115 | // don't trigger on keypress. 116 | $(editor.getWrapperElement()).keydown(function(e) { 117 | e.stopPropagation(); 118 | }); 119 | 120 | if (opts.codemirror.runnable || codeblock.attr("runnable")) { 121 | // make the code runnable 122 | var wrapper = editor.getWrapperElement(), 123 | button = $('
', { 124 | "class" : "button", 125 | text : "Run" 126 | }).prependTo(wrapper), 127 | clearButton = $('
', { 128 | "class" : "button clear", 129 | text : "Clear" 130 | }).prependTo(wrapper), 131 | output = $('
', { 132 | "class" : opts.classes.codemirrorresult 133 | }).appendTo($(wrapper).parent()); 134 | 135 | clearButton.click(function(editor, output){ 136 | return function(event) { 137 | output.html(''); 138 | }; 139 | }(editor, output)); 140 | 141 | button.click(function(editor, output){ 142 | return function(event) { 143 | 144 | // save the default logging behavior. 145 | var real_console_log = console.log; 146 | 147 | // save the default logging behavior. 148 | // Following Dean Edward's fantastic sandbox code: 149 | // http://dean.edwards.name/weblog/2006/11/sandbox/+evaluating+js+in+an+iframe 150 | // create an iframe sandbox for this element. 151 | var iframe = $("