Skip to content

Instantly share code, notes, and snippets.

@tahir-hassan

tahir-hassan/Showdown-HighlightJs.html

Created February 26, 2019 16:32
Show Gist options
  • Save tahir-hassan/c60497b6a74498e3c11149443f1bc9e9 to your computer and use it in GitHub Desktop.
Save tahir-hassan/c60497b6a74498e3c11149443f1bc9e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Showdown-HighlightJs.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Showdown and Highlight JS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.5/styles/default.min.css" />
<style>
xmp.hide {
display: none;
}
</style>
</head>
<body>
<h1>Automatic Showdown and Highlight JS</h1>
<xmp class="showdown hide">tahir
```xml
<tahir>
<b>aldslfdsaj</b>
</tahir>
```
```xml
<tahir>
<b>aldslfdsaj</b>
</tahir>
<script>
var hello = "tahir";
</script>
```
```js
function helloworld() {
if (true) {
}
}
```</xmp>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.5/highlight.min.js"></script>
<script>
function processShowdownXmps() {
var showdownConverter = new showdown.Converter();
showdownConverter.setFlavor('github');
document.querySelectorAll('xmp.showdown').forEach((xmp) => {
var text = xmp.innerText;
var html = showdownConverter.makeHtml(text);
var div = document.createElement('div');
div.innerHTML = html;
div.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
xmp.parentNode.insertBefore(div, xmp.nextSibling);
});
}
(function() {
processShowdownXmps();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment