prismjs 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建，使用 Prismjs 可以快速为网站添加代码高亮功能，支持超过113中编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能，本文教你如何在wordpress上快速使用Prismjs实现代码高亮。

一、下载JS和CSS文件并上传到网站根目录。

在Prismjs网站下载页面下载需要的JS和CSS文件，下载页面：

http://prismjs.com/download.html

在下载页面，需要选择高亮模板、支持的编程语言、插件，选择完毕后下载生成的JS和CSS文件。

二、上传JS和CSS文件到网站模板目录

注：（以Wordpress为例）我把文件上传到了网站的wp-content目录，然后在页面中引用。

三、修改header.php和footer.php文件

找到wordpress 使用的主题目录，分别修改header.php和footer.php文件

打开header.php文件，在标签前添加CSS引用。修改后就是这样

<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>

打开footer.php文件，在标签前添加JS引用，修改后如下：

<body>
...
<script src="prism.js"></script>
</body>

四、在文章中引用

完成上述步骤后，就可以在wordpress文章中引用了。

在发表文章时将代码块用<code><pre>标签包围起来，就可以实现代码高亮功能了！

例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)
{
}
}
}
```

五、代码块添加行号

在<pre>里添加 line-numbers 类就可以开启代码快的行号，当然前提是你必须下载Line Numbers插件。添加方式如下：

<pre class="line-numbers"><code class="language-css">

或

``` css
代码
```

六、prismjs支持的语言

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

本文来源：http://www.3gjn.com/growth/117.html

使用prismjs为网站添加代码高亮功能相关推荐

自建站的博客网站添加百度统计功能统计流量
有了自己的网站后,想要知道自己网站的访问情况怎么办,有两种方法,一种是自己写代码进行ip地址获取并解析IP地址来源从而得到IP地址属地,进一步进行统计.另一种方法就是使用现有的统计工具,我这里使用的是 ...
为电子商务网站添加在线支付功能
2019独角兽企业重金招聘Python工程师标准>>> 网页制作Webjx文章简介:为了方便买家们在网站购物时能够在线支付货款并有效提升网站档次,作为购物网站的站长有必要给网站增添在 ...
ckeditor4.4.6添加代码高亮
研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
服务器添加网站标识,网络工商标识-如何在网站添加代码点亮工商红盾标识
中国工商银行的标识代码是什么? 首先,要实现将工商网监电子标识代码嵌入网站中的操作,需要操作人员具备拥有网站FTP权限,并且,该网站属于独立网站(域名),否则是无法进行操作的. 正常来说,鉴于美观.方 ...
完美：C# Blazor中显示Markdown并添加代码高亮
昨天发了一篇介绍这个库:C# Blazor中显示Markdown文件,介绍怎么在Blazor中显示Markdown内容的文章,文章内的代码是没有高亮的,思来相去,还是要做好,于是百度到这篇文章.NET ...
网站添加微信支付功能（小白填坑）
本周的工作安排就是在网站添加支付功能,包括支付宝.微信.财付通等,今天这篇文章先说一下微信支付吧,支付宝的太容易了基本看一下都会了 1.首先准备工作,开通了支付功能的账号,具体怎么开通的我也不熟悉因为 ...
语录系统php,杨泽业：给你的php网站添加经典语录功能
我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能这个 ...
Ghost配置2——添加代码高亮
使用Ghost的初体验,主题外观都很满意,除了代码段的显示效果. 没有代码高亮,这效果怎么说呢?就像是使用了文本编辑器在写代码,说不上离经叛道,但就是从心底觉得一个字:土. 用Ghost加高亮做关键字 ...
给网站添加代码统计-实现流量的变现
前言流量统计变现金,如果你有属于自己的网站,接入后,就可以变现属于流量统计,不会添加任何广告,跟挂统计一样,还能赚钱,自己测试了一下,的确能赚钱挂统计就给钱的平台,网站ip统计从原先的付费,到现 ...

使用prismjs为网站添加代码高亮功能