做区域链的网站,做网站端口映射,深圳 做网站,下载购物appprismjs 是一款轻量、可扩展的代码语法高亮库#xff0c;使用现代化的 Web 标准构建#xff0c;使用 Prismjs 可以快速为网站添加代码高亮功能#xff0c;支持超过113中编程语言#xff0c;还支持多种插件#xff0c;是简洁、高效的代码高亮解决方案。科技爱好者博客就是使…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 hrefthemes/prism.css relstylesheet /
/head 打开footer.php文件在标签前添加JS引用修改后如下 body
...
script srcprism.js/script
/body 四、在文章中引用
完成上述步骤后就可以在wordpress文章中引用了。
在发表文章时将代码块用codepre标签包围起来就可以实现代码高亮功能了
例1如下 precode classlanguage-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 classline-numberscode classlanguage-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 7 - 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 View Code 本文来源 http://www.3gjn.com/growth/117.html
