您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)SyntaxHighlighter自動識別并加載腳本語言的示例分析,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
SyntaxHighlighter是一個使用JavaScript編寫的支持多種編程語言語法高亮的JS插件,很多大型網(wǎng)站或博客都在使用。
SyntaxHighlighter插件默認(rèn)是每種編程語言加載對應(yīng)JS語言庫,那么如何實(shí)現(xiàn)SyntaxHighlighter自動加載不同語言的JS語言庫
SyntaxHighlighter官方已經(jīng)給出了解決方案 shAutoloader.js
自動加載庫;
在HTML文件中引用SyntaxHighlighter核心運(yùn)行庫
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Hello SyntaxHighlighter</title> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCore.css" rel="external nofollow" rel="external nofollow" /> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css" rel="external nofollow" rel="external nofollow" /> </head>
shCore.js SyntaxHighlighter插件的核心運(yùn)行庫
shAutoloader.js 自動加載運(yùn)行庫要實(shí)現(xiàn)自動加載必須引入此文件
shCore.css 核心CSS樣式
shCoreDefault.css 主題CSS樣式
以上四個文件必須引用到文檔中
需要高亮顯示的代碼請入在 <pre class="brush:js;"></pre>
里
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Hello SyntaxHighlighter</title> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCore.css" rel="external nofollow" rel="external nofollow" /> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css" rel="external nofollow" rel="external nofollow" /> </head> <body> <h2>Hello SyntaxHighlighter</h2> <pre class="brush: js;"> function helloSyntaxHighlighter() { return "hi!"; } </pre>
<pre class="brush: js;">
中的 class="brush: js;"
是根據(jù)顯示代碼語言而定
下面是實(shí)現(xiàn)SyntaxHighlighter自動加載的主要代碼
<script language="javascript"> function path(){ var args = arguments, result = []; for(var i = 0; i < args.length; i++) result.push(args[i].replace('@', '/pub/sh/current/scripts/'));//請?zhí)鎿Q成自己項目中SyntaxHighlighter的具體路徑 return result }; SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js' )); SyntaxHighlighter.all(); </script>
以上就是實(shí)現(xiàn)SyntaxHighlighter自動識別語言并自動載語言庫的代碼,需要的同學(xué)可以測試下;
看完上述內(nèi)容,你們對SyntaxHighlighter自動識別并加載腳本語言的示例分析有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。