Permalink
Browse files

Colorize HTML on the About page

  • Loading branch information...
1 parent b292d5e commit 2deb924b7c019b4ef70529eca8b1300eb420cfe2 @ihanson ihanson committed Feb 27, 2013
Showing with 25 additions and 11 deletions.
  1. +1 −0 .gitignore
  2. +12 −5 Makefile
  3. +12 −6 static/about.html
View
@@ -6,6 +6,7 @@ config.py
# generated web files
static/all*
+static/codemirror.js
static/jquery.min.js
static/sockjs.js
static/wrap.js
View
@@ -12,6 +12,7 @@ jquery-ui = static/jquery-ui/js/jquery-ui-1.8.21.custom.min.js
sagecell = static/sagecell.js
sagecell-css = static/sagecell.css
sockjs-client = static/sockjs.js
+codemirror-cat = static/codemirror.js
codemirror-css = submodules/codemirror/lib/codemirror.css
codemirror = submodules/codemirror/lib/codemirror.js
cm-brackets = submodules/codemirror/addon/edit/matchbrackets.js
@@ -21,6 +22,8 @@ cm-html-mode = submodules/codemirror/mode/htmlmixed/htmlmixed.js
cm-js-mode = submodules/codemirror/mode/javascript/javascript.js
cm-css-mode = submodules/codemirror/mode/css/css.js
cm-r-mode = submodules/codemirror/mode/r/r.js
+cm-runmode = submodules/codemirror/addon/runmode/runmode.js
+cm-colorize = submodules/codemirror/addon/runmode/colorize.js
jquery-ui-tp = submodules/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js
cssmin = submodules/cssmin/src/cssmin.py
jsmin = submodules/jsmin/jsmin.c
@@ -48,12 +51,16 @@ $(jquery):
$(all-min-js): $(jsmin-bin) $(all-js)
$(jsmin-bin) < $(all-js) > $(all-min-js)
-$(all-js): $(ip-namespace) $(wrap-js) $(codemirror) $(cm-python-mode) \
+$(codemirror-cat): $(codemirror) $(cm-python-mode) \
$(cm-xml-mode) $(cm-html-mode) $(cm-js-mode) $(cm-css-mode) \
- $(cm-r-mode) $(cm-brackets) $(jmol-js) $(sockjs-client) $(compute_server) $(sagecell)
- cat $(codemirror) $(cm-brackets) $(cm-python-mode) $(cm-xml-mode) $(cm-html-mode) \
- $(cm-js-mode) $(cm-css-mode) $(cm-r-mode) $(jmol-js) $(ip-namespace) \
- $(wrap-js) > $(all-js)
+ $(cm-r-mode) $(cm-brackets) $(cm-runmode) $(cm-colorize)
+ cat $(codemirror) $(cm-brackets) $(cm-python-mode) $(cm-xml-mode) \
+ $(cm-html-mode) $(cm-js-mode) $(cm-css-mode) $(cm-r-mode) \
+ $(cm-runmode) $(cm-colorize) > $(codemirror-cat)
+
+$(all-js): $(ip-namespace) $(wrap-js) $(codemirror-cat) $(jmol-js) \
+ $(sockjs-client) $(compute_server) $(sagecell)
+ cat $(codemirror-cat) $(jmol-js) $(ip-namespace) $(wrap-js) > $(all-js)
echo ';' >> $(all-js)
cat $(sockjs-client) $(compute_server) $(sagecell) >> $(all-js)
View
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="root.css">
+ <link rel="stylesheet" href="all.min.css">
<title>About the Sage Cell Server</title>
</head>
<body>
@@ -45,24 +46,25 @@ <h3 id="embedding">Embedding into a webpage</h3>
of your server). The third line makes it so that any element with a
class of <code>sage</code> will turn into a Sage cell.
</p>
- <pre><code>&lt;script src="http://sagecell.sagemath.org/static/jquery.min.js"&gt;&lt;/script&gt;
+ <pre data-lang="text/html">&lt;script src="http://sagecell.sagemath.org/static/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://sagecell.sagemath.org/static/embedded_sagecell.js"&gt;&lt;/script&gt;
-&lt;script&gt;sagecell.makeSagecell({"inputLocation": ".sage"});&lt;/script&gt;</code></pre>
+&lt;script&gt;sagecell.makeSagecell({"inputLocation": ".sage"});&lt;/script&gt;</pre>
<p>
If you are embedding into a webpage with lots of styling
(like a blog, or a deck.js presentation), there might be
conflicts between the page styling and the styles for the Sage
cell. In that case, you might also include the following code
after the above in order to fix the Sage cell styles.
</p>
- <pre><code>&lt;link rel="stylesheet" type="text/css" href="http://sagecell.sagemath.org/static/sagecell_embed.css"></code></pre>
+ <pre data-lang="text/html">&lt;link rel="stylesheet" type="text/css" href="http://sagecell.sagemath.org/static/sagecell_embed.css"></pre>
</li>
<li>
Include code in the body of the page. The code is wrapped in
- <code>&lt;script&gt;</code> tags so that it is not treated as HTML.
- <pre><code>&lt;div class="sage"&gt;
+ <code>&lt;script&gt;</code> tags so that it is not
+ treated as HTML.
+ <pre data-lang="text/html">&lt;div class="sage"&gt;
&lt;script type="text/x-sage"&gt;1+2&lt;/script&gt;
-&lt;/div&gt;</code></pre>
+&lt;/div&gt;</pre>
</li>
</ol>
There are <a href="https://github.com/sagemath/sagecell/blob/master/doc/embedding.rst">lots of options</a>
@@ -294,5 +296,9 @@ <h2 id="authors">Authors</h2>
author(s) and do not necessarily reflect the views of the National
Science Foundation (NSF).
</p>
+ <script src="codemirror.js"></script>
+ <script>
+ setTimeout(CodeMirror.colorize, 0);
+ </script>
</body>
</html>

0 comments on commit 2deb924

Please sign in to comment.