I'm trying to learn about rendering Markdown inside HTML, and using Markdown-it and Highlight.js I use that code:
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="/js/styles/dark.min.css" />
<title>Example Markdown-it</title>
</head>
<body>
<div class="container">
<div class="markdown">
## Example Markdown Content
Example list:
* One
* Two
* Three
A code segment:
```js
window.onload = function() {
var md = window.markdownit();
var div = document.getElementsByClassName('markdown');
for (var i = 0; i < div.length; i++) {
var content = div[i].innerHTML;
document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
}
}
```
And now a C snippet:
```c
#include <stdio.h>
#include <other.h>
int main() {
printf("hello world!\n");
int x = 100;
if (x > 50)
printf("x is greater than 50\n");
return 0;
}
```
</div> <!-- end of markdown content -->
</div>
<script src="js/markdown-it.min.js"></script>
<script src="js/highlight.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>
and that is the Javascript:
window.onload = function() {
const md = markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre><code class="hljs">' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {}
}
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
var div = document.getElementsByClassName('markdown');
for (var i = 0; i < div.length; i++) {
var content = div[i].innerHTML;
document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
}
}
the problem is when this render the Markdown produce this (incorrect) output:
)
Is escaping < and > inside the code block although thats not I want, do that without Highlight.js, clearly is Markdown-it that produce the problem, and why auto-complete (incorrectly recognition) the #includes inside the block code?, I don't know much Javascript
beyond the basic, but I don't think the error is in this code, problably set any other option in Markdown-it to avoid this behavior?
The code used is from https://github.com/markdown-it/markdown-it?tab=readme-ov-file#syntax-highlighting:
const md = markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre><code class="hljs">' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {}
}
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
And from How do I use markdown-it without node.js?:
var div = document.getElementsByClassName('markdown');
for (var i = 0; i < div.length; i++) {
var content = div[i].innerHTML;
document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
}
Here a CodePen example https://codepen.io/hwwfgicb-the-animator/pen/ByaPVdo
