JS：Prism.js实现代码高亮

时间：05-24来源：作者：点击数：34

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.

译文：Prism是一款轻量级、可扩展的语法高亮器，它是根据现代网络标准构建的。它被用于数以百万计的网站，包括你每天访问的一些网站。

文档

官网：https://prismjs.com/index.html

使用方式

1、方式一：下载css和js

引入到页面即可使用

<!-- 引入css -->
<link href="prism.css" rel="stylesheet" />

<!-- 使用prism -->        
<pre><code class="language-css">p { color: red }</code></pre>

<!-- 引入js -->    
<script src="prism.js"></script>

2、方式二：npm

npm install prismjs

示例

import Prism from 'prismjs';

const Prism = require('prismjs');

// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

使用示例

以下风格：Okaidia ocodia

实现效果

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>prism demo</title>
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    
    <h2>javascript</h2>
    <pre><code class="language-javaScript">let user = {
        "name": "Tom", 
        "age": 18
};

console.log("hello world!");</code></pre>

    <h2>css</h2>
    <pre><code class="language-css">p { color: red }</code></pre>

    <script src="prism.js"></script>
  </body>
</html>