Skip to content

Instantly share code, notes, and snippets.

@jvarn

jvarn/markdown-parsing.html

Last active July 17, 2023 06:05
Show Gist options
  • Save jvarn/e75c2dbed31774d0c8fd863f7ffe5ae9 to your computer and use it in GitHub Desktop.
Save jvarn/e75c2dbed31774d0c8fd863f7ffe5ae9 to your computer and use it in GitHub Desktop.
Download ZIP
Markdown parsing with code highlighting using Marked JS and Marked Highlight
Raw
markdown-parsing.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Markdown Parsing</title>
</head>
<body>
<h1>Markdown Parsing using Marked JS</h1>
<p>Fetches Marked JS Readme.md as an example.</p>
<section id="content"></section>
</body>
<!-- Markdown Parsing -->
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
<!-- Code Highlighting -->
<script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/a11y-dark.min.css"/> <!-- https://unpkg.com/browse/@highlightjs/cdn-assets@11.8.0/styles/ -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js"></script>
<!-- Sanitize HTML Output -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
<script>
const {markedHighlight} = globalThis.markedHighlight;
fetch("https://raw.githubusercontent.com/markedjs/marked/master/README.md")
.then((res) => res.text())
.then((text) => {
marked.use(markedHighlight({
langPrefix: 'hljs language-',
highlight(code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
}));
document.getElementById('content').innerHTML =
DOMPurify.sanitize(marked.parse(text));
})
.catch((e) => console.error(e));
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment