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. UC编程：输入输出重定向（标准IO）
			
    [c] #include <stdio.h> #include <stdlib.h> int main() { FILE *fp; char szBuf[100]; /* 将屏 ...
    
			
    2. 
						
  2. 小公司免费的ERP软件
			
    http://www.2bizbox.cn/ https://www.odoo.com/
    
			
    3. 
						
  3. 安装Windows2012操作系统 - 初学者系列 - 学习者系列文章
			
    Windows 2012是微软最新的服务器操作系统,估计在国外服务器空间的运营商安装的比较多些吧.下面简要介绍下该操作系统的安装. 1.  将光盘放入光驱.进入BIOS设置成光驱启动.重启计算机. 2 ...
    
			
    4. 
						
  4. sql材料分级统计及汇总案例参考
			
    --第一步:根据系统编号.列.单价分组求和 select CLBH,DJ,sum(SL) as SL,sum(JE) as JE,Lie into #TempSZCMX from #ShouZhiCu ...
    
			
    5. 
						
  5. grep、egrep、fgrep的用法与特性详解
			
    [转载自]http://tanxw.blog.51cto.com/4309543/1361993 开篇        学习Linux也有一段时间了,对Linux多少也算是有点了解了,越是了解也就越对这 ...
    
			
    6. 
						
  6. 【学习笔记】锋利的jQuery（三）事件和动画
			
    一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...
    
			
    7. 
						
  7. UVA 568 (13.07.28)
			
     Just the Facts  The expression N!, read as `` N factorial," denotes the product of the first N ...
    
			
    8. 
						
  8. Leetcode::JumpGame
			
    Description: Given an array of non-negative integers, you are initially positioned at the first inde ...
    
			
    9. 
						
  9. UAC权限
			
    .NET中提升UAC权限的方法总结   [题外话] 从Vista开始,由于增加了UAC(用户账户控制,User Account Control)功能,使得管理员用户平时不再拥有能控制所有功能的管理员权 ...
    
			
    10. 
						
  10. Discuz! X2.5数据库字典(转)
			
    DROP TABLE IF EXISTS pre_common_admincp_cmenu; CREATE TABLE pre_common_admincp_cmenu ( `id` SMALLINT ...
    
			
    11.