您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS:Prism.js实现代码高亮

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

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是一款轻量级、可扩展的语法高亮器,它是根据现代网络标准构建的。它被用于数以百万计的网站,包括你每天访问的一些网站。

文档

使用方式

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>

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门