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. printf详解
			
    用了这么多年c了,今天想编个小程序练练手,忽然发现对于printf这个函数并不甚了解.上网查了查,下面是对printf()的详解: 函数原型: #include <stdio.h> int ...
    
			
    2. 
						
  2. [Android 性能优化系列]降低你的界面布局层次结构的一部分
			
    大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地 ...
    
			
    3. 
						
  3. ProvissyTool Update Support Page
			
    DO NOT REPLY. ############# #??????# ############
    
			
    4. 
						
  4. parent和top
			
    function show(){ //parent是获取本窗口的父窗口   //window.parent.location.href="http://www.baidu.com" ...
    
			
    5. 
						
  5. 有关Android存储的相关概念辨析
			
    我想念许多Android开发人员在碰到有关存储的相关问题时,肯定遇到过“内部存储/内存”.“外部存储/外存”等类似的概念,尤其是将相关概念跟非开发人员解释时,那真是“秀才遇到兵,有理说不清哪”.包括我 ...
    
			
    6. 
						
  6. 学习GDI+ （1）
			
    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
    
			
    7. 
						
  7. Linux 系统命令总结
			
    自己收集到的Linux系统命令大全! 1,查看apache2的连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S ...
    
			
    8. 
						
  8. js理解
			
    js-提前声明和new操作符理解   1.提前声明:声明变量后,js会把声明部分提前到作用域前面. var a=1; function aheadOfStatement(){ alert(a); va ...
    
			
    9. 
						
  9. 推荐几个JSON工具
			
    JSON查看 http://jsonviewer.codeplex.com/ JSON转类(非常好使) http://jsonclassgenerator.codeplex.com https://g ...
    
			
    10. 
						
  10. C#基础知识梳理索引
			
    C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...
    
			
    11.