Permalink
Browse files

Add a syntax highlighting shim for PRE tags, use in manual

  • Loading branch information...
1 parent 40e5bae commit 4bfa0b594f912045579b5700e7043cdfdeb9cc9b @marijnh marijnh committed Dec 10, 2012
Showing with 58 additions and 10 deletions.
  1. +15 −5 doc/manual.html
  2. +14 −5 doc/upgrade_v3.html
  3. +29 −0 lib/util/colorize.js
View
@@ -6,6 +6,14 @@
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
<style>dl dl {margin: 0;}</style>
+ <script src="../lib/codemirror.js"></script>
+ <link rel="stylesheet" href="../lib/codemirror.css">
+ <script src="../lib/util/runmode.js"></script>
+ <script src="../lib/util/colorize.js"></script>
+ <script src="../mode/javascript/javascript.js"></script>
+ <script src="../mode/xml/xml.js"></script>
+ <script src="../mode/css/css.js"></script>
+ <script src="../mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>
@@ -48,21 +56,21 @@ <h2 id="usage">Basic Usage</h2>
(See <a href="compress.html">the compression helper</a> for an
easy way to combine scripts.) For example:</p>
- <pre>&lt;script src="lib/codemirror.js">&lt;/script>
+ <pre data-lang="text/html">&lt;script src="lib/codemirror.js">&lt;/script>
&lt;link rel="stylesheet" href="../lib/codemirror.css">
&lt;script src="mode/javascript/javascript.js">&lt;/script></pre>
<p>Having done this, an editor instance can be created like
this:</p>
- <pre>var myCodeMirror = CodeMirror(document.body);</pre>
+ <pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body);</pre>
<p>The editor will be appended to the document body, will start
empty, and will use the mode that we loaded. To have more control
over the new editor, a configuration object can be passed
to <code>CodeMirror</code> as a second argument:</p>
- <pre>var myCodeMirror = CodeMirror(document.body, {
+ <pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body, {
value: "function myScript(){return 100;}\n",
mode: "javascript"
});</pre>
@@ -80,15 +88,15 @@ <h2 id="usage">Basic Usage</h2>
document somewhere. This could be used to, for example, replace a
textarea with a real editor:</p>
- <pre>var myCodeMirror = CodeMirror(function(elt) {
+ <pre data-lang="javascript">var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});</pre>
<p>However, for this use case, which is a common way to use
CodeMirror, the library provides a much more powerful
shortcut:</p>
- <pre>var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre>
+ <pre data-lang="javascript">var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre>
<p>This will, among other things, ensure that the textarea's value
is updated with the editor's contents when the form (if it is part
@@ -1449,5 +1457,7 @@ <h2 id="modeapi">Writing CodeMirror Modes</h2>
<div style="height: 2em">&nbsp;</div>
+<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
+
</body>
</html>
View
@@ -5,6 +5,14 @@
<title>CodeMirror: Upgrading to v3</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
+ <script src="../lib/codemirror.js"></script>
+ <link rel="stylesheet" href="../lib/codemirror.css">
+ <script src="../lib/util/runmode.js"></script>
+ <script src="../lib/util/colorize.js"></script>
+ <script src="../mode/javascript/javascript.js"></script>
+ <script src="../mode/xml/xml.js"></script>
+ <script src="../mode/css/css.js"></script>
+ <script src="../mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>
@@ -64,7 +72,7 @@ <h2 id=gutters>Gutter model</h2>
The <code>fixedGutter</code> option was removed (since it is now the
only behavior).</p>
-<pre>
+<pre data-lang="text/html">
&lt;style>
/* Define a gutter style */
.note-gutter { width: 3em; background: cyan; }
@@ -94,7 +102,7 @@ <h2 id=events>Event handling</h2>
which act more as hooks than as event handlers, are still there in
their old form.)</p>
-<pre>
+<pre data-lang="javascript">
cm.on("change", function(cm, change) {
console.log("something changed! (" + change.origin + ")");
});
@@ -108,7 +116,7 @@ <h2 id=marktext>markText method arguments</h2>
takes the CSS class name as a separate argument, but makes it an
optional field in the options object instead.</p>
-<pre>
+<pre data-lang="javascript">
// Style first ten lines, and forbid the cursor from entering them
cm.markText({line: 0, ch: 0}, {line: 10, ch: 0}, {
className: "magic-text",
@@ -126,7 +134,7 @@ <h2 id=folding>Line folding</h2>
<p>The <a href="../demo/folding.html">folding script</a> has been
updated to use the new interface, and should now be more robust.</p>
-<pre>
+<pre data-lang="javascript">
// Fold a range, replacing it with the text "??"
var range = cm.markText({line: 4, ch: 2}, {line: 8, ch: 1}, {
replacedWith: document.createTextNode("??"),
@@ -146,7 +154,7 @@ <h2 id=lineclass>Line CSS classes</h2>
and <a href="manual.html#removeLineClass"><code>removeLineClass</code></a>,
which allow more modular control over the classes attached to a line.</p>
-<pre>
+<pre data-lang="javascript">
var marked = cm.addLineClass(10, "background", "highlighted-line");
setTimeout(function() {
cm.removeLineClass(marked, "background", "highlighted-line");
@@ -214,5 +222,6 @@ <h2 id=new>New features</h2>
</div></div>
+<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
</body>
</html>
View
@@ -0,0 +1,29 @@
+CodeMirror.colorize = (function() {
+
+ var isBlock = /^(p|li|div|h\\d|pre|blockquote|td)$/;
+
+ function textContent(node, out) {
+ if (node.nodeType == 3) return out.push(node.nodeValue);
+ for (var ch = node.firstChild; ch; ch = ch.nextSibling) {
+ textContent(ch, out);
+ if (isBlock.test(node.nodeType)) out.push("\n");
+ }
+ }
+
+ return function(collection, defaultMode) {
+ if (!collection) collection = document.body.getElementsByTagName("pre");
+
+ for (var i = 0; i < collection.length; ++i) {
+ var node = collection[i];
+ var mode = node.getAttribute("data-lang") || defaultMode;
+ if (!mode) continue;
+
+ var text = [];
+ textContent(node, text);
+ node.innerHTML = "";
+ CodeMirror.runMode(text.join(""), mode, node);
+
+ node.className += " cm-s-default";
+ }
+ };
+})();

0 comments on commit 4bfa0b5

Please sign in to comment.