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.
文档
- 官网：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>本文链接：https://my.lmcjl.com/post/14646.html
展开阅读全文
4 评论