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. 使用Python改写的身份证信息查询小程序
			
    花了几天时间过了一遍python基础.真心感觉python让世界充满了爱…先简单的使用一下python好了,拿以前写的<C语言身份证信息查询系统(修改版)>开刀~ 很多东西,不需要考虑C语 ...
    
			
    2. 
						
  2. VMware安装CentOS 图文教程
			
    VMware安装CentOS 图文教程 VMware 下安装CentOS6.2 取消 Easy install模式(此模式不好,很多软件没有安装) http://jingyan.baidu.com/a ...
    
			
    3. 
						
  3. leetcode[70] Simplify Path
			
    题目的意思是简化一个unix系统的路径.例如: path = "/home/", => "/home"path = "/a/./b/../../ ...
    
			
    4. 
						
  4. 【SSRS】入门篇(七) -- 报表发布
			
    原文:[SSRS]入门篇(七) -- 报表发布 完成[SSRS]入门篇(六) -- 分组和总计后,第一份简单的报表就已完成了,下面把报表发布到报表服务器上. (实际情况下,报表展示给用户未必是用报表服 ...
    
			
    5. 
						
  5. C#中IList<T>与List<T>的区别
			
    首先IList 泛型接口是 ICollection 泛型接口的子代,并且是所有泛型列表的基接口.它仅仅是所有泛型类型的接口,并没有太多方法可以方便实用,如果仅仅是作为集合数据的承载体,确实,IList ...
    
			
    6. 
						
  6. oracle中sql语句的优化
			
    oracle中sql语句的优化 一.执行顺序及优化细则 1.表名顺序优化 (1) 基础表放下面,当两表进行关联时数据量少的表的表名放右边表或视图: Student_info   (30000条数据)D ...
    
			
    7. 
						
  7. linux 启动oracle报cannot restore segment prot after reloc: Permission denied
			
    error while loading shared libraries: $ORACLE_HOME/lib/libnnz10.so: cannot restore segment prot afte ...
    
			
    8. 
						
  8. iTextSharp生成pdf文档案例
			
    1.using iTextSharp.text;using iTextSharp.text.pdf; 2.设置页面大小 iTextSharp.text.Rectangle pageSize = new ...
    
			
    9. 
						
  9. 浅谈DevExpress<二>：设计一个完整界面（2）
			
    下面来把剩下的工作做完,换肤功能昨天已近讨论过,今天就不重复了.首先建立三个全局变量,一个存放文件路径,一个存放数据,一个存放过滤条件. string DBFileName; DataView dat ...
    
			
    10. 
						
  10. spring.NET的依赖注入
			
    谈谈自己了解的spring.NET的依赖注入   spring.net里实现了控制反转IOC(Inversion of control),也即依赖注入DI(Dependency Injection), ...
    
			
    11.