使用 Prism.js 实现漂亮的代码语法高亮

最新推荐文章于 2024-05-21 09:40:25 发布

IT码农-爱吃辣条

最新推荐文章于 2024-05-21 09:40:25 发布

阅读量2.4w

点赞数 3

分类专栏： Web 文章标签： Prism

本文链接：https://blog.csdn.net/qq_24504591/article/details/87976918

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介
Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。
为什么选择 Prism.js ？
- 极致易用
  引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！
- 天生伶俐
  语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。
- 轻如鸿毛
  代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。
- 快如闪电
  如果可能，支持通过 Web Workers 实现并行。
- 轻松扩展
  定义新语言或扩展现有语法，或者新增功能都非常简单。
- 丰富样式
  所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。
下载地址
- 官网地址
  http://prismjs.com/download.html
- BootCDN 地址
  https://www.bootcdn.cn/prism/1.15.0/
使用教程

line-numbers便是显示行号，language-markup就是语言。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Prism 代码语法高亮</title>
  <link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/prism/1.15.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet">
  <!-- <link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism-okaidia.css" rel="stylesheet"> -->
  <style>
    #box {
      width: 60%;
      margin-left: 35px;
    }
  </style>
</head>

<body>
  <div id="box">
    <h3>css显示:</h3>
    <pre class="line-numbers"><code class="language-css">p { color: red }
</code></pre>
    <h3>js显示:</h3>
    <pre class="line-numbers"><code class="language-js">require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.getValue(); ##取值</code></pre>
    <h3>java显示:</h3>
    <pre class="line-numbers"><code class="language-java">String res=new ShowApiRequest("http://route.showapi.com/213-4","my_appI"my_appSecret")
  .addTextPara("topid","5")
  .post();
System.out.println(res);
</code></pre>
    <h3>html显示:</h3>
    <pre class="line-numbers"><code id="code-1" class="language-html"></code></pre>
    <pre class="line-numbers"><code id="code-2" class="language-html">&lt;p>data-foo&lt;/p&gt;
&lt;p>数据绑定&lt;/p></code></pre>
  </div>
  <script src="https://cdn.bootcss.com/prism/1.15.0/prism.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.15.0/components/prism-java.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.15.0/plugins/line-numbers/prism-line-numbers.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script>
    var text =
      '<link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">\n' + '<p>js操作html数据绑定</p>';
    var text = $('#code-1').text(text)
    console.log($('#code-1').text());
  </script>
</body>

</html>

支持的语言

Markup - markup
CSS - css
C-like - clike
JavaScript - javascript
ABAP - abap
ActionScript - actionscript
Apache Configuration - apacheconf
APL - apl
AppleScript - applescript
AsciiDoc - asciidoc
ASP.NET (C#) - aspnet
AutoIt - autoit
AutoHotkey - autohotkey
Bash - bash
BASIC - basic
Batch - batch
Bison - bison
Brainfuck - brainfuck
Bro - bro
C - c
C# - csharp
C++ - cpp
CoffeeScript - coffeescript
Crystal - crystal
CSS Extras - css-extras
D - d
Dart - dart
Diff - diff
Docker - docker
Eiffel - eiffel
Elixir - elixir
Erlang - erlang
F# - fsharp
Fortran - fortran
Gherkin - gherkin
Git - git
GLSL - glsl
Go - go
Groovy - groovy
Haml - haml
Handlebars - handlebars
Haskell - haskell
Haxe - haxe
HTTP - http
Icon - icon
Inform 7 - inform7
Ini - ini
J - j
Jade - jade
Java - java
JSON - json
Julia - julia
Keyman - keyman
Kotlin - kotlin
LaTeX - latex
Less - less
LOLCODE - lolcode
Lua - lua
Makefile - makefile
Markdown - markdown
MATLAB - matlab
MEL - mel
Mizar - mizar
Monkey - monkey
NASM - nasm
nginx - nginx
Nim - nim
Nix - nix
NSIS - nsis
Objective-C - objectivec
OCaml - ocaml
Oz - oz
PARI/GP - parigp
Parser - parser
Pascal - pascal
Perl - perl
PHP - php
PHP Extras - php-extras
PowerShell - powershell
Processing - processing
Prolog - prolog
Protocol Buffers - protobuf
Puppet - puppet
Pure - pure
Python - python
Q - q
Qore - qore
R - r
React JSX - jsx
reST (reStructuredText) - rest
Rip - rip
Roboconf - roboconf
Ruby - ruby
Rust - rust
SAS - sas
Sass (Sass) - sass
Sass (Scss) - scss
Scala - scala
Scheme - scheme
Smalltalk - smalltalk
Smarty - smarty
SQL - sql
Stylus - stylus
Swift - swift
Tcl - tcl
Textile - textile
Twig - twig
TypeScript - typescript
Verilog - verilog
VHDL - vhdl
vim - vim
Wiki markup - wiki
YAML - yaml

插件-plugins

插件是扩展Prism功能的附加脚本（和CSS代码）。

线条突出显示 - Line Highlight
行号 - Line Numbers
显示隐形 - Show Invisibles
Autolinker - Autolinker
Web平台文档 - WebPlatform Docs
自定义类 - Custom Class
文件突出显示 - File Highlight
显示语言 - Show Language
JSONP亮点 - JSONP Highlight
突出显示关键字 - Highlight Keywords
删除初始换行符 - Remove initial line feed
预览器 - Previewers
自动加载磁带机 - Autoloader
保持标记 - Keep Markup
命令行 - Command Line
非转义标记 - Unescaped Markup
规范化空白 - Normalize Whitespace
数据URI突出显示 - Data-URI Highlight
工具栏 - Toolbar
复制到剪贴板按钮 - Copy to Clipboard Button

IT码农-爱吃辣条

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
11
评论
使用 Prism.js 实现漂亮的代码语法高亮

简介Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。为什么选择 Prism.js ？极致易用引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！天生伶俐语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。轻如鸿毛代码压缩后只有 1.6KB。...
复制链接

扫一扫