使用prismjs为网站添加代码高亮功能
prismjs 是一款輕量、可擴(kuò)展的代碼語(yǔ)法高亮庫(kù)，使用現(xiàn)代化的 Web 標(biāo)準(zhǔn)構(gòu)建，使用 Prismjs 可以快速為網(wǎng)站添加代碼高亮功能，支持超過113中編程語(yǔ)言，還支持多種插件，是簡(jiǎn)潔、高效的代碼高亮解決方案。科技愛好者博客就是使用了Prism.js 實(shí)現(xiàn)漂亮的代碼語(yǔ)法高亮功能，本文教你如何在wordpress上快速使用Prismjs實(shí)現(xiàn)代碼高亮。
一、下載JS和CSS文件并上傳到網(wǎng)站根目錄。
在Prismjs網(wǎng)站下載頁(yè)面下載需要的JS和CSS文件，下載頁(yè)面：
http://prismjs.com/download.html
在下載頁(yè)面，需要選擇高亮模板、支持的編程語(yǔ)言、插件，選擇完畢后下載生成的JS和CSS文件。
二、上傳JS和CSS文件到網(wǎng)站模板目錄
注：（以Wordpress為例）我把文件上傳到了網(wǎng)站的wp-content目錄，然后在頁(yè)面中引用。
三、修改header.php和footer.php文件
找到wordpress 使用的主題目錄，分別修改header.php和footer.php文件
打開header.php文件，在標(biāo)簽前添加CSS引用。修改后就是這樣
<html> <head> ... <link href="themes/prism.css" rel="stylesheet" /> </head>打開footer.php文件，在標(biāo)簽前添加JS引用，修改后如下：
<body> ... <script src="prism.js"></script> </body>四、在文章中引用
完成上述步驟后，就可以在wordpress文章中引用了。
在發(fā)表文章時(shí)將代碼塊用<code><pre>標(biāo)簽包圍起來(lái)，就可以實(shí)現(xiàn)代碼高亮功能了！
例1如下：
<pre><code class="language-php"> <?php echo "Hello World!"; ?> </code></pre> 例2如下：
``` csharp using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;namespace inTestCar.Web {public partial class _Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}} }```
五、代碼塊添加行號(hào)
在<pre>里添加 line-numbers 類就可以開啟代碼快的行號(hào)，當(dāng)然前提是你必須下載Line Numbers插件。添加方式如下：
<pre class="line-numbers"><code class="language-css">或
``` css代碼```六、prismjs支持的語(yǔ)言
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 View Code本文來(lái)源 ：http://www.3gjn.com/growth/117.html
?
總結(jié)
以上是生活随笔為你收集整理的使用prismjs为网站添加代码高亮功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Flexible 弹性盒子模型之CSS
- 下一篇： 玩转ajax