使用prismjs为网站添加代码高亮功能
2018-06-24 00:53:38来源:未知 阅读 ()
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 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
本文来源 :http://www.3gjn.com/growth/117.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html标签详解(2)
下一篇:移动端适配
- CSS中的float和margin的混合使用 2020-06-11
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- HTML开发实例-简单相亲网站开发(主体为table) 2020-05-27
- 通配符选择器 2020-05-27
- ECharts安装与使用 2020-05-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash