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  - 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






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


												


											
使用prismjs为网站添加代码高亮功能的更多相关文章
	

    
								
  1. blogger添加代码高亮
		
    blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的 ...
    
		
    2. 
						
  2. ckeditor4.4.6添加代码高亮
		
    研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
    
		
    3. 
						
  3. 利用nginx向现有网站添加登录验证功能（不添加修改现有网站代码）
		
    在不改变现有网站代码的前提下加入验证功能: 1.假设现有网站后端nodejs,端口3000,nginx配置如下 server { listen 80; server_name localhost; l ...
    
		
    4. 
						
  4. bootstrap设计网站中添加代码高亮插件
		
    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...
    
		
    5. 
						
  5. WordPress给网站添加支付宝捐赠功能
		
    最开始是在陌小雨的博客上看见这个功能,其实一般个人网站都会添加这个功能,下面我会讲解两种,不多说,上图: 1.添加到网页中任何位置: 上图这个功能可以添加到网页中的任何位置,可以在文章中添加,也可以利 ...
    
		
    6. 
						
  6. vim添加代码折叠功能
		
    用空格或者za命名改变,添加如下到vimrc文件 " Enable folding set foldmethod=indent set foldlevel=99 " Enable  ...
    
		
    7. 
						
  7. 开启KindEditor代码高亮功能
		
    KindEditor4.0 开始支持插入代码功能!!!如何使用插入代码功能实现前段页面代码高亮显示和后台代码维护显示!!! 1. 需要高亮显示代码的前台页面需要引用相应的css样式和js文件 < ...
    
		
    8. 
						
  8. ckeditor添加代码插入功能及高亮显示（插件）
		
    Auto SyntaxHighlighter SyntaxHighlighter CKEditor Button 下载以上两个插件,启用 以下可有可无: (设置在编辑器的显示样式) ckeditor高 ...
    
		
    9. 
						
  9. 代码高亮美化插件-----SyntaxHighlighter
		
    IT类文章博客,代码高亮美化插件-----SyntaxHighlighter 最近在做一个类似个人博客的网站,因为文章中会用到各种代码,主要是Javascript,CSS,PHP,XML等.这些代码如 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. php学习之路：php在iconv功能 详细解释
			
    iconv函数库可以完毕各种字符集间的转换,是php编程中必不可少的基础函数库. 使用方法例如以下: $string = "亲爱的朋友欢迎訪问胡文芳的博客.希望给您带来一点点的帮助!&quo ...
    
			
    2. 
						
  2. leetcod Pow(x, n)
			
    题目:就是实现一个指数函数. 直接用一个while一直乘以n词肯定是会超时的. 自己写了用递归(而且是很挫的递归),测试了无数次,根据每个case去修改代码.终于可以AC了.不忍直视,自己写了好长,如 ...
    
			
    3. 
						
  3. C# socket通信随记回顾
			
    ----tcp(传输 控制 协议)是可靠消息:三次握手(发给对方,对方发给自己,证明对方接到消息,在发给对方,说明自己能接到对方消息,这样就都知道了):tcp:每发送一次消息,对方都会回复,证明接受到 ...
    
			
    4. 
						
  4. MVC使用RDL报表
			
    MVC使用RDL报表 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持 ...
    
			
    5. 
						
  5. jsoneditor显示Json data
			
    Git开源地址:https://github.com/josdejong/jsoneditor/blob/master/docs/api.md 1.引用JS文件 <!-- jsoneditor  ...
    
			
    6. 
						
  6. Vijos:P1001谁拿了最多奖学金
			
    描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>80),并且在本学期内发表1篇或1篇以 ...
    
			
    7. 
						
  7. 了解你的被测系统（why？）
			
    了解你的被测系统(why?)   如何做好系统集成测试[二.了解你的被测系统]   如果看完了第一篇文章,你的答案是Yes.我们可以继续讨论如何做系统集成测试啦. 了解你的被测系统(why?) 一如既 ...
    
			
    8. 
						
  8. c#中如何跨线程调用windows窗体控件？
			
    我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍.首先来看传统方法: public partial c ...
    
			
    9. 
						
  9. Nginx反向代理实现Tomcat多个应用80端口访问
			
    应用背景 一般我们在开发时,一个工程里会有多个Web应用,比如一个前台一个后台,那我们就需要配置2个Tomcat服务器,比如一个是http://localhost:8080,一个是http://loc ...
    
			
    10. 
						
  10. LigerUI+MVC的应用1
			
    [项目开发]LigerUI+MVC的应用(一) 近期因为稍微空闲有点时间,就晚上回家自己在随便写写代码,也就边写边记,中间主要采用了微软的MVC4.0框架.虽然目前公司也是使用的MVC的模式,但是因为 ...
    
			
    11.