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

  1. 简介
    Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。

  2. 为什么选择 Prism.js ?

    • 极致易用
      引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!

    • 天生伶俐
      语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。

    • 轻如鸿毛
      代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。

    • 快如闪电
      如果可能,支持通过 Web Workers 实现并行。

    • 轻松扩展
      定义新语言或扩展现有语法,或者新增功能都非常简单。

    • 丰富样式
      所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

  3. 下载地址

    • 官网地址
      http://prismjs.com/download.html
    • BootCDN 地址
      https://www.bootcdn.cn/prism/1.15.0/
  4. 使用教程

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>
  1. 支持的语言
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
  1. 插件-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
  • 3
    点赞
  • 8
    收藏
  • 打赏
    打赏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论 11

打赏作者

IT码农-爱吃辣条

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值