前端语法高亮插件Prism.js使用详细教程_javascript技巧_脚本之家

+

目录

脚本之家 / 编程助手：解决程序员“几乎”所有问题！
脚本之家官方知识库 → 点击立即使用

介绍

最近项目有代码高亮的需求，这边是选用 Prism.js 来进行代码高亮。

Prism 是一款轻量级、可扩展的语法高亮器，根据现代 Web 标准构建，应用广泛。

官网：https://prismjs.com/

文档：https://prismjs.com/docs/index.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

<!DOCTYPE html>

<`html`>

<`head`>

<!-- 可以通过 CDN 的方式导入 -->

<`meta charset="utf-8" />`

<`meta name="viewport" content="width=device-width, initial-scale=1" />`

<`title>Prism Test</title`>

<`link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />`

</`head`>

<`body`>

<`pre class="line-numbers"`>

<`code class="language-cpp"`>

#include &lt;iostream>

using namespace std;

struct ListNode {

int val;

ListNode *next;

ListNode() : val(0), next(nullptr) {}

ListNode(int x) : val(x), next(nullptr) {}

ListNode(int x, ListNode *next) : val(x), next(next) {}

}; 

</`code`>

</`pre`>

<`script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script`>

<`script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script`>

<`script`

src`=`"https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"

integrity`=`"sha256-ronWqXsvaeyrdiX7YJfdYj0S5NbeMA5ilQQTrK25Jno="

crossorigin`=`"anonymous"

></`script`>

</`body`>

</`html`>

登录后复制免费讲解

主题

Prism.js 支持多种主题

插件

Prism.js 有多种插件可以使用，这里介绍几个常用的插件。

1、show-language

在代码块中显示代码块对应语言的名称

Show Language ▲ Prism plugins：https://prismjs.com/plugins/show-language

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<pre>

<code class=`"language-js"`>

function curry(func) {

return function curried(...args) {

if (args.length >= func.length) {

return func.apply(`this`, args);

} else {

return function`(...args2) {`

return curried.apply(`this`, args.concat(args2));

}

}

};

}

</code>

</pre>

登录后复制免费讲解

2、line-numbers

在代码块中显示行号

Line Numbers ▲ Prism plugins：https://prismjs.com/plugins/line-numbers/

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<pre class=`"line-numbers"`>

<code class=`"language-js"`>

function curry(func) {

return function curried(...args) {

if (args.length >= func.length) {

return func.apply(`this`, args);

} else {

return function`(...args2) {`

return curried.apply(`this`, args.concat(args2));

}

}

};

}

</code>

</pre>

登录后复制免费讲解

通过添加  "line-numbers" class 来为代码块（<pre>）添加行号。

如果将 "line-numbers" class 添加到 <body> 中，则为所有代码块（<pre>）添加行号。

此外，我们可以使用 "no-line-numbers" class 来移除行号。

3、normalize-whitespace

标准化代码块中的空白字符Normalize Whitespace ▲ Prism plugins：https://prismjs.com/plugins/normalize-whitespace/

默认情况下，该插件会裁剪每个代码块的所有前端和尾部空白字符，并移除每行上多余的缩进和尾部空白字符。

可以通过添加 "no-whitespace-normalization" class 来阻止该插件生效。

示例代码

?

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

<!DOCTYPE html>

<`html`>

<`head`>

<`meta charset="utf-8" />`

<`meta name="viewport" content="width=device-width, initial-scale=1" />`

<`title>Prism Test</title`>

<`link href="prism.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />`

</`head`>

<`body`>

<`pre`>

<`code class="language-js"`>

function curry(func) {

return function curried(...args) {

if (args.length >= func.length) {

return func.apply(this, args);

} else {

return function(...args2) {

return curried.apply(this, args.concat(args2));

}

}

};

}

</`code`>

</`pre`>

<`script src="prism.js"></script`>

</`body`>

</`html`>

登录后复制免费讲解

 不使用 normalize-whitespace 插件情况

使用  normalize-whitespace 插件情况

可以看到在使用  normalize-whitespace 插件情况下，代码块前端的空白字符被移除，更为美观。

4、unescaped-markup

编写标记语言而无需转义任何内容

Unescaped markup ▲ Prism plugins：https://prismjs.com/plugins/unescaped-markup/

可以使用 <script type="text/plain" class="language-markup"> 方式

?

1

2

3

4

5

<`script type="text/plain" class="language-markup"`>

<`html></html`>

<`p>Example</p`>

<`div><button>Hello</button></div`>

</`script`>

登录后复制免费讲解

 也可以使用 <pre><!-- --></pre> 方式

?

1

2

3

4

5

6

7

<`pre`>

<`code class="language-markup"><!--`

<html></html>

<p>Example</p>

<div><button>Hello</button></div>

-->`</code>`

</`pre`>

登录后复制免费讲解

5、copy-to-clipboard

添加一个按钮，可以在单击时将代码块内容复制到剪贴板

Copy to Clipboard ▲ Prism plugins：https://prismjs.com/plugins/copy-to-clipboard/默认情况下，插件以英语显示消息，并设置 5 秒的间隔复制时间。

可以使用以下属性来覆盖默认设置：

  • data-prismjs-copy — 默认情况下复制按钮显示的文字
  • data-prismjs-copy-error — 复制失败时显示的信息
  • data-prismjs-copy-success — 复制成功时显示的信息
  • data-prismjs-copy-timeout — 两次复制允许的间隔时间

?

1

2

3

4

5

6

7

8

9

10

11

12

<`pre`>

<`code class="language-js"`

data-prismjs-copy`=`"复制"

data-prismjs-copy-error`=`"复制失败"

data-prismjs-copy-success`=`"复制成功"

>

let range = new Range();

range.setStart(p1.firstChild, 2);

range.setEndAfter(p2.firstChild);

document.getSelection().addRange(range);

</`code`>

</`pre`>

登录后复制免费讲解

6、show-invisibles

显示隐藏字符，例如制表符和换行符

Show Invisibles ▲ Prism plugins：https://prismjs.com/plugins/show-invisibles/

使用

1、直接下载

在下载界面选择需要的语言和插件，下载 js 和 css， 然后导入使用

Download ▲ Prism：https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript

?

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<`html`>

<`head`>

...

<`link href="prism.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />`

</`head`>

<`body`>

...

<`script src="prism.js"></script`>

</`body`>

</`html`>

登录后复制免费讲解

2、CDN 方式

可以使用 cdnjs、jsDelivr 和 UNPKG 等 cdn 导入 PrismJS

?

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

<!DOCTYPE html>

<`html`>

<`head`>

<!-- 通过 CDN 方式导入 -->

<`meta charset="utf-8" />`

<`meta name="viewport" content="width=device-width, initial-scale=1" />`

<`title>Prism Test</title`>

<`link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />`

</`head`>

<`body`>

<`pre class="line-numbers"`>

<`code class="language-cpp"`>

#include &lt;iostream>

using namespace std;

struct ListNode {

int val;

ListNode *next;

ListNode() : val(0), next(nullptr) {}

ListNode(int x) : val(x), next(nullptr) {}

ListNode(int x, ListNode *next) : val(x), next(next) {}

}; 

</`code`>

</`pre`>

<`script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script`>

<`script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script`>

<`script`

src`=`"https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"

integrity`=`"sha256-ronWqXsvaeyrdiX7YJfdYj0S5NbeMA5ilQQTrK25Jno="

crossorigin`=`"anonymous"

></`script`>

</`body`>

</`html`>

登录后复制免费讲解

3、Vue3 中使用

?

1

2

3

4

npm install prismjs

# 支持 typescript

npm install @types/prismjs -D

npm install vite-plugin-prismjs -D

登录后复制免费讲解

vite.config.js 中配置

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import prismjs from 'vite-plugin-prismjs'`;`

export default defineConfig({

plugins: [

prismjs({

languages: [`'javascript',` `'css', 'html',` `'json', 'sass',` `'scss', 'md',` `'bash', 'shell',` `'ts'],`

plugins: [

'toolbar'`,`

'show-language'`,`

'copy-to-clipboard'`,`

'normalize-whitespace'`,`

'line-numbers'`,`

'unescaped-markup'

],

theme: 'tomorrow'`,`

css: true

})

],

});

登录后复制免费讲解

基本使用

?

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

<`template`>

<`pre class="line-numbers"`>

<`code class='language-js'`>

// JavaScript 代码

function curry(func) {

return function curried(...args) {

if (args.length >= func.length) {

return func.apply(this, args);

} else {

return function(...args2) {

return curried.apply(this, args.concat(args2));

}

}

};

}

</`code`>

</`pre`>

</`template`>

<`script setup>`

import { onMounted } from 'vue';

import Prism from 'prismjs';

onMounted(() => {

Prism.highlightAll();

});

</`script`>

<`style lang="scss" scoped></style>`

登录后复制免费讲解

补充

API

Prism.js 提供了一些 API

详见：https://prismjs.com/docs/Prism.html#.manual

如：

?

1

highlight(text, grammar, language) → {string}

登录后复制免费讲解

?

1

2

// 例子

Prism.highlight(`'var foo = true;', Prism.languages.javascript,` `'javascript');`

登录后复制免费讲解

按钮样式调节

我们可能对代码块右上角按钮的样式不太满意，可以对此进行一定的调整。

如：

按钮变为方框，改变光标类型

?

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

36

37

38

39

40

41

42

43

44

<!DOCTYPE html>

<`html`>

<`head`>

<`meta charset="utf-8" />`

<`meta name="viewport" content="width=device-width, initial-scale=1" />`

<`title>Prism Test</title`>

<`link href="prism.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" type="text/css" />`

<`style`>

body {

margin: 0;

padding: 0;

height: 100vh;

}

div.code-toolbar > .toolbar {

opacity: 1;

}

.toolbar .toolbar-item span,

.toolbar .toolbar-item button {

border-radius: 0 !important;

margin: 0 6px;

}

.copy-to-clipboard-button:hover {

cursor: pointer;

}

</`style`>

</`head`>

<`body`>

<`pre class="line-numbers"`>

<`code class="language-js"`

data-prismjs-copy`=`"复制"

data-prismjs-copy-error`=`"复制失败"

data-prismjs-copy-success`=`"复制成功"

>

let range = new Range();

range.setStart(p1.firstChild, 2);

range.setEndAfter(p2.firstChild);

document.getSelection().addRange(range);

</`code`>

</`pre`>

<`script src="prism.js"></script`>

</`body`>

</`html`>

登录后复制免费讲解

Vue3 代码高亮组件（仅供参考）

在 Vue3 中无法使用 <script type="text/plain" class="language-markup"> 方式高亮标记语言。

如果需要实现一个代码高亮组件的话 ，我们可以使用 <pre></pre> + slot  的方式渲染非标记语言；

使用 <pre></pre> + props + Prism.highlight +  v-html 来渲染标记语言。

高亮 script 标签

使用 <script type="text/plain" class="language-markup"> 方式高亮标记语言时，如果要高亮 <script> 标签则需要转义。

如

?

1

2

3

4

5

6

<`script type="text/plain" class="language-markup"`>

<`html></html`>

<`p>Example</p`>

<`div><button>Hello</button></div`>

<`script`>&lt;/script>

</`script`>

登录后复制免费讲解

此外，在 Vue3 中通过 API 渲染 <script> 标签时，转义后，可能会引起 eslint 报错，可以通过配置 'no-useless-escape': 'off' 等方式解决，见 配置规则 - ESLint - 插件化的 JavaScript 代码检查工具。

总结

到此这篇关于前端语法高亮插件Prism.js使用详细教程的文章就介绍到这了,更多相关前端语法高亮Prism.js使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

原网址: 访问
创建于: 2025-01-02 18:20:07
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论
DeepMind
© 2018-2025 deepmind.t-salon.cc
粤ICP备14087121号
文章总数 : 8140
随言碎语 : 67
评论总数 : 130
登录用户 : 31