-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
35 lines (29 loc) · 1.06 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>
<script type="module" defer>
import {HLJSEditable} from "./index.js";
const hljs = new HLJSEditable(document.querySelector('code'));
const lang_input = document.querySelector('input');
lang_input.addEventListener('change', () => {
hljs.changeLang( lang_input.value );
});
</script>
<style>
code[contenteditable]::after {
content: "\200b"
}
</style>
</head>
<body>
Language : <input value="js" />
<pre><code class="language-js">
console.log("Hello World");
</code></pre>
</body>
</html>