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. openwrt固件支持3G和4G上网卡
			
    http://wiki.openwrt.org/doc/howtobuild/wireless-router-with-a-3g-dongle Building image with support  ...
    
			
    2. 
						
  2. Android 使用Gson解析json案例具体解释
			
    一.眼下解析json有三种工具:org.json(Java经常使用的解析),fastjson(阿里巴巴project师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:h ...
    
			
    3. 
						
  3. html postMessage 创建聊天应用
			
    应用说明: 这个例子演示如何在门户页面以iframe方式嵌入第三方插件,示例中使用了一个来域名下的应用部件,门户页面通过postMessage来通信.iframe中的聊天部件通过父页面标题内容的闪烁来 ...
    
			
    4. 
						
  4. C# 图片存入SQL Server数据库
			
    OpenFileDialog openfiledialog1 = new OpenFileDialog(); if (openfiledialog1.ShowDialog() == DialogRes ...
    
			
    5. 
						
  5. 转载：21个免费的UI界面设计工具、资源及网站
			
    我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产 ...
    
			
    6. 
						
  6. Spring.NET学习
			
    Spring.NET学习笔记——目录(原)   目录 前言 Spring.NET学习笔记——前言 第一阶段:控制反转与依赖注入IoC&DI Spring.NET学习笔记1——控制反转(基础篇) ...
    
			
    7. 
						
  7. C#实现函数根据返回类型重载
			
    一直以来都很奇怪为何C#不能直接支持函数返回值重载, 比如如下两个函数是编译不过的 Public Class DbHelper { Public Static int ExecuteScalar(); ...
    
			
    8. 
						
  8. Linux系统编程：客户端-服务器用FIFO进行通信
			
    先放下代码  回来在解释 头文件: clientinfo.h struct CLIENTINFO{ ]; int leftarg; int rightarg; char op; }; typedef  ...
    
			
    9. 
						
  9. poj3006 筛选法求素数模板（数论）
			
    POJ:3006 很显然这是一题有关于素数的题目. 注意数据的范围,爆搜超时无误. 这里要用到筛选法求素数. 筛选法求素数的大概思路是: 如果a这个数是一个质数,则n*a不是质数. 用一个数组实现就是 ...
    
			
    10. 
						
  10. AngularJS框架速写
			
    最近在把玩AngularJS框架,之前也看过流行的Backbone,不过AngularJS给人的感觉完全不同,它走的是一条高帅富之路. 按照官方的说法,AngularJS是一套依赖注入的MVC开发套件 ...
    
			
    11.