代码高亮
来自https://weiya.me/item/65.html
使用插件Prism.js，到以下地址下载：http://prismjs.com/index.html
做了一些示例，并且下载了我感觉自己可能用到的语言，放在了https://github.com/fengh16/Web-Learning/tree/master/HTMLEditor
先很简单说明一下怎么使用（见index.html，可以直接访问http://www.fhao.top/coding/）：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<head>
<title>Test for an web editor.</title>
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<script src="prism.js"></script>
<pre><code class="language-css">p { color: red }</code></pre>
<pre><code class="language-c++ line-numbers">int main()
{
return 0;
}</code></pre>
</body>
|
也就是说，东西要放在<pre><code class="language-XXX">XXX</code></pre>里面显示，如果需要加上行号就在code的class里面加上line-numbers
CKEditor 5
引用方法：<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-beta.1/classic/ckeditor.js"></script>
官方教程见https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html#inline-editor
自己尝试了一下，如下的CKEditor.html（可以访问http://www.fhao.top/coding/CKEditor.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
| <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test for an web editor.</title>
</head>
<body>
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-beta.1/inline/ckeditor.js"></script>
<h1>Inline editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
InlineEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-beta.1/classic/ckeditor.js"></script>
<h1>Classic editor</h1>
<div id="claeditor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#claeditor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
|
也就是要调用对应Editor的create方法，将对应的selector作为参数，如：
ClassicEditor.create( document.querySelector( '#claeditor' ) )