Skip to content

Instantly share code, notes, and snippets.

@markheath

markheath/index.html

Last active November 20, 2015 05:59
Show Gist options
  • Save markheath/7fec83463e15069ffe07 to your computer and use it in GitHub Desktop.
Save markheath/7fec83463e15069ffe07 to your computer and use it in GitHub Desktop.
Download ZIP
Migrate from Syntax Highlighter to Highlight.js
Raw
index.html
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8><title>Highlight JS</title>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"></script>
</head>
<body>
<div class=container>
<h3>Some XML / HTML</h3>
<p>Put this in your head:</p>
<pre class="brush: xml;"> &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"&gt;&lt;/script&gt;</pre>
<h3>Some JavaScript</h3>
<p>Put this in a script block at the end of your body:</p>
<pre class="brush: javascript;">document.addEventListener("DOMContentLoaded", function (event) {
var languages = hljs.listLanguages();
var codeBlocks = document.getElementsByTagName("pre");
for (var i = 0; i &lt; codeBlocks.length; i++) {
var block = codeBlocks[i];
var regex = /brush\:\s([a-zA-z]+)\;/g;
match = regex.exec(block.className);
var brushName = "nohighlight";
if (match != null) {
var oldBrushName = match[1];
if (oldBrushName == "csharp") oldBrushName = "cs";
if (languages.indexOf(oldBrushName) === -1) {
console.log("unsupported brush " + oldBrushName);
}
else {
brushName = oldBrushName;
}
}
block.className = "hljs " + brushName;
hljs.highlightBlock(block);
}
});
</pre>
<h3>Some C#</h3>
<p>C# Supported out of the box</p>
<pre class="brush: csharp;">private static string CallMailChimpApi(string method, string requestJson)
{
var endpoint = String.Format("https://{0}.api.mailchimp.com/2.0/{1}", "us3", method);
var wc = new WebClient();
try
{
return wc.UploadString(endpoint, requestJson);
}
catch (WebException we)
{
using (var sr = new StreamReader(we.Response.GetResponseStream()))
{
return sr.ReadToEnd();
}
}
}</pre>
<h3>Some F#</h3>
<p>F# had to be added with an additional language pluin (hosted on cloudflare)</p>
<pre class="brush: fsharp;">
let firstHundred = [0..100]
List.map (fun x -&gt; x * 2)
(List.filter (fun x -&gt; x % 2 = 0) firstHundred)</pre>
<h3>Some plain text</h3>
<p>For plain text, the nohighlight class can be used</p>
<pre class="brush: plain;">This is the first line
This is the second line</pre>
<script >
document.addEventListener("DOMContentLoaded", function (event) {
var languages = hljs.listLanguages();
console.log(languages);
var codeBlocks = document.getElementsByTagName("pre");
for (var i = 0; i < codeBlocks.length; i++) {
var block = codeBlocks[i];
var regex = /brush\:\s([a-zA-z]+)/g; // removed requirement for a semi-colon at end - this is not always present
match = regex.exec(block.className);
var brushName = "nohighlight";
if (match != null) {
var oldBrushName = match[1];
if (oldBrushName == "csharp") oldBrushName = "cs";
if (oldBrushName == "js") oldBrushName = "javascript";
if (languages.indexOf(oldBrushName) === -1) {
console.log("unsupported brush " + oldBrushName);
}
else {
brushName = oldBrushName;
}
block.className = "hljs " + brushName;
hljs.highlightBlock(block);
}
// don't highlight if no "brush: " found, might be a github gist or another style of code block
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment