search

markedjs / marked-highlight

Add code highlighting to marked
https://www.npmjs.com/package/marked-highlight
MIT License
77 stars 9 forks source link

Need example for CDN hosted on html #257

Closed reflexdemon closed 4 months ago

reflexdemon commented 4 months ago

I was trying to add code highlighting to a static html file and this does not seem to be working for me. Can you please add a Browser example like this? https://github.com/bent10/marked-extensions/tree/main/packages/code-format#browser

UziTech commented 4 months ago

Here is an example:

<html>
<head>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>

<script>
const { Marked } = window.marked;
const { markedHighlight } = window.markedHighlight;

const marked = new Marked(
  markedHighlight({
    langPrefix: 'hljs language-',
    highlight(code, lang, info) {
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    }
  })
);

const div = document.createElement("div");
div.innerHTML = marked.parse(`
\`\`\`javascript
const highlight = "code";
\`\`\`
`);
document.body.append(div);
</script>

</body>
</html>
LBASD commented 4 months ago

Does IE 11 10 not support？

UziTech commented 4 months ago

No, Microsoft doesn't even support them anymore.