Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Colorize HTML on the About page

  • Loading branch information...
commit 2deb924b7c019b4ef70529eca8b1300eb420cfe2 1 parent b292d5e
@ihanson ihanson authored
Showing with 25 additions and 11 deletions.
  1. +1 −0  .gitignore
  2. +12 −5 Makefile
  3. +12 −6 static/about.html
View
1  .gitignore
@@ -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
17 Makefile
@@ -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
18 static/about.html
@@ -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,9 +46,9 @@ <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
@@ -55,14 +56,15 @@ <h3 id="embedding">Embedding into a webpage</h3>
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>
Please sign in to comment.
Something went wrong with that request. Please try again.