Skip to content

Instantly share code, notes, and snippets.

@akirattii

akirattii/markdown-for-blogger-monokai-like-code-highlight.html

Created May 24, 2018 04:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save akirattii/d7faa98aad546e9a2406d04247d0a42b to your computer and use it in GitHub Desktop.
Save akirattii/d7faa98aad546e9a2406d04247d0a42b to your computer and use it in GitHub Desktop.
Download ZIP
markdown for blogger (monokai like code highlight)
Raw
markdown-for-blogger-monokai-like-code-highlight.html
<html>
...
<!-- for markdown -->
<script src="//cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel='stylesheet' href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/monokai.min.css" />
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'></script>
<script
src="//code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
<script>
$(function(){
var renderer = new marked.Renderer();
// '## aaa (hoge)' => '<a name="hoge"><h2>aaa</h2>'
renderer.heading = function(text, level) {
var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
var tmp = text.match(/^(.+)\s\((.+)\)$/);
var title = "",
name = "";
if (tmp) {
title = tmp[1];
name = tmp[2];
} else {
title = text;
}
var tag = `<a name="${name}"/>`;
if (level === 1) {
tag += `<h1>${title}</h1>`;
} else if (level === 2) {
tag += `<h2>${title}</h2>`;
} else if (level === 3) {
tag += `<h3>${title}</h3>`;
} else if (level === 4) {
tag += `<h4>${title}</h4>`;
} else if (level === 5) {
tag += `<h5>${title}</h5>`;
} else if (level === 6) {
tag += `<h6>${title}</h6>`;
} else {
tag += "";
}
return tag;
};
renderer.code = function(code, language) {
return "<pre><code class='hljs'>" + hljs.highlightAuto(code).value + "</code></pre>";
};
marked.setOptions({
renderer: renderer,
});
$(".markdown").replaceWith(function(){
return $("<div/>").html(marked(this.value));
});
});
</script>
<!--/ for markdown -->
</body>
...
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment