I am building a markdown previewer and when I create a code block in markdown (inside of editor div), I want it to have a highlighted style inside of a preview div.
So I decided to use Prism.js.(I tried highlight.js before, didn’t work).
But, with Prism I made it work partially, My code has changed color, but it was all the same color and no highlight being applied.
Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./prism.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Markdown Previewer</title>
</head>
<body>
<div class="container">
<div class="editor">
<div id="ed-navbar" class="navbar">
EDITOR
</div>
<textarea name="markdown"></textarea>
</div>
<div class="preview">
<div id="pr-navbar" class="navbar">
PREVIEW
</div>
<div class="prev-text">
</div>
</div>
</div>
<script type="module" src="./index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="prism.js"></script>
</body>
</html>
JS:
const $ = document.querySelectorAll.bind(document);
const mrk = new Request('sample.md');
fetch(mrk)
.then(data => data.text())
.then(text => {
$('textarea')[0].innerHTML = text;
$('.prev-text')[0].innerHTML = marked(text, {renderer: renderer})
});
marked.setOptions({
breaks: true
});
let renderer = new marked.Renderer();
renderer.link = function(href, title, text) {
return `<a target="_blank" href="${href}">${text}` + `</a>`
}
renderer.code = function(code, infostring, escaped) {
return `<pre><code class="language-javascript">${code}` + `</code></pre>\n`;
}
let txtArea = $('textarea')[0];
txtArea.addEventListener('input', event => {
$('.prev-text')[0].innerHTML = marked(event.target.value, {renderer: renderer})
});