星空网 > 软件开发 > 网页设计

使用prismjs为网站添加代码高亮功能

prismjs 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能,本文教你如何在wordpress上快速使用Prismjs实现代码高亮。

一、下载JS和CSS文件并上传到网站根目录。

在Prismjs网站下载页面下载需要的JS和CSS文件,下载页面:

http://prismjs.com/download.html

使用prismjs为网站添加代码高亮功能

在下载页面,需要选择高亮模板、支持的编程语言、插件,选择完毕后下载生成的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='/images/loading.gif' data-original="prism.js"></script></body>

四、在文章中引用

完成上述步骤后,就可以在wordpress文章中引用了。

在发表文章时将代码块用<code><pre>标签包围起来,就可以实现代码高亮功能了!

例1如下:

<pre><code class="language-php"><?phpecho "Hello World!";?></code>
</pre>

例2如下:
``` csharpusing 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支持的语言

使用prismjs为网站添加代码高亮功能使用prismjs为网站添加代码高亮功能
Markup - markupCSS - cssC-like - clikeJavaScript - javascriptABAP - abapActionScript - actionscriptApache Configuration - apacheconfAPL - aplAppleScript - applescriptAsciiDoc - asciidocASP.NET (C#) - aspnetAutoIt - autoitAutoHotkey - autohotkeyBash - bashBASIC - basicBatch - batchBison - bisonBrainfuck - brainfuckBro - broC - cC# - csharpC++ - cppCoffeeScript - coffeescriptCrystal - crystalCSS Extras - css-extrasD - dDart - dartDiff - diffDocker - dockerEiffel - eiffelElixir - elixirErlang - erlangF# - fsharpFortran - fortranGherkin - gherkinGit - gitGLSL - glslGo - goGroovy - groovyHaml - hamlHandlebars - handlebarsHaskell - haskellHaxe - haxeHTTP - httpIcon - iconInform 7 - inform7Ini - iniJ - jJade - jadeJava - javaJSON - jsonJulia - juliaKeyman - keymanKotlin - kotlinLaTeX - latexLess - lessLOLCODE - lolcodeLua - luaMakefile - makefileMarkdown - markdownMATLAB - matlabMEL - melMizar - mizarMonkey - monkeyNASM - nasmnginx - nginxNim - nimNix - nixNSIS - nsisObjective-C - objectivecOCaml - ocamlOz - ozPARI/GP - parigpParser - parserPascal - pascalPerl - perlPHP - phpPHP Extras - php-extrasPowerShell - powershellProcessing - processingProlog - prologProtocol Buffers - protobufPuppet - puppetPure - purePython - pythonQ - qQore - qoreR - rReact JSX - jsxreST (reStructuredText) - restRip - ripRoboconf - roboconfRuby - rubyRust - rustSAS - sasSass (Sass) - sassSass (Scss) - scssScala - scalaScheme - schemeSmalltalk - smalltalkSmarty - smartySQL - sqlStylus - stylusSwift - swiftTcl - tclTextile - textileTwig - twigTypeScript - typescriptVerilog - verilogVHDL - vhdlvim - vimWiki markup - wikiYAML - yaml

View Code

本文来源 :http://www.3gjn.com/growth/117.html



 




原标题:使用prismjs为网站添加代码高亮功能

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

美国公司报税——税务不规范,美国公司被IRS全球追缴“天价税单”:https://www.kjdsnews.com/a/1482676.html
腾讯广告婚庆行业营销策略:https://www.kjdsnews.com/a/1482677.html
美国海外仓 | 你的产品适合海外仓一件代发吗?:https://www.kjdsnews.com/a/1482678.html
【规范申报】农具归类知多少:https://www.kjdsnews.com/a/1482679.html
卖家必看!关于荷兰VAT,你需要知道这些!:https://www.kjdsnews.com/a/1482680.html
图解丨一文看懂进境粮食初审联系单电子化申请流程:https://www.kjdsnews.com/a/1482681.html
如何利用HARO进行外链建设?:https://www.kjdsnews.com/a/1836620.html
2024年,前景最被看好的十大行业:https://www.kjdsnews.com/a/1836621.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流