缘起
今年发现博客园支持markdown语法,就开始用markdown些博客了.markdown写文章最大的好处就是不用局限在浏览器里写了,有个记事本就可以开始了.
markdown里对代码块的引用语法是三个撇[ ``` ],在其后可增加代码名称,比如java,js等标记该部分代码的类型.之后在页面展现的时候就可以高亮显示关键字了.
比如下面这段代码:
```java
package com.qyf404.learn.maven;
import org.junit.After;
import org.junit.Assert;
import org.junit.Before;
import org.junit.Test;
public class AppTest {
private App app;
@Before
public void setUp() {app = new App();}
@Test
public void testAdd() throws InterruptedException {
int a = 1;
int b = 2;
int result = app.add(a, b);
Assert.assertEquals(a + b, result);
}
@After
public void tearDown() throws Exception {
}
}
```
在页面展现成了这样:
package com.qyf404.learn.maven;
import org.junit.After;
import org.junit.Assert;
import org.junit.Before;
import org.junit.Test;
public class AppTest {
private App app;
@Before
public void setUp() {
app = new App();
}
@Test
public void testAdd() throws InterruptedException {
int a = 1;
int b = 2;
int result = app.add(a, b);
Assert.assertEquals(a + b, result);
}
@After
public void tearDown() throws Exception {
}
}
后面让我们扒一扒页面源码探一探这其中的缘由.
其根本原因是博客园页面里引入了一段js,该段js可以解析markdown里的代码块,并高亮显示.
扒一扒页面源码
在页面源码中我们发现有个js很特别 http://www.cnblogs.com//bundles/blog-common.js?v=CLLiFNNgL6CohO3Olq2i7r9tPyHtCoryr0KngxdwUm41.
让我们在里面搜一搜java,就发现这么一段代码
来取出来整理整理:
function cb_CodeHighlight() {
var n=!1, t = $("pre");
(t.length && $.each(t, function() {
var t = $(this).attr("class");
t && t.indexOf("") >= 0 && (n=!0, t.indexOf("gutter:true;") >= 0 && $(this).parent().addClass("sh-gutter"))
}), n) && (SyntaxHighlighter.autoloader.apply(null, shBushPathPrepare("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 pas @shBrushDelphi.js", "diff patch @shBrushDiff.js", "erl erlang @shBrushErlang.js", "groovy @shBrushGroovy.js", "java @shBrushJava.js", "jfx javafx @shBrushJavaFX.js", "js jscript javascript @shBrushJScript.js", "perl pl Perl @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?id=20150508", "objc obj-c @shBrushObjectiveC.js", "f# f-sharp fsharp @shBrushFSharp.js", "xpp dynamics-xpp @shBrushDynamics.js", "r s splus @shBrushR.js", "matlab @shBrushMatlab.js", "swift @shBrushSwift.js", "go golang @shBrushGo.js")), SyntaxHighlighter.config.strings.expandSource = "+ View Code", SyntaxHighlighter.vars.discoveredBrushes = null, SyntaxHighlighter.all())
}
原来博客园用了这个SyntaxHighlighter框架来作代码高亮显示啊.
支持高亮显示的语言
让我们现在整理个表格,看看博客园的markdown到底支持多少种语言高亮显示.
名称 | 关键字 | 调用的js | 说明 |
---|---|---|---|
AppleScript | applescript | shBrushAppleScript.js | |
ActionScript 3.0 | actionscript3 , as3 | shBrushAS3.js | |
Shell | bash , shell | shBrushBash.js | |
ColdFusion | coldfusion , cf | shBrushColdFusion.js | |
C | cpp , c | shBrushCpp.js | |
C# | c# , c-sharp , csharp | shBrushCSharp.js | |
CSS | css | shBrushCss.js | |
Delphi | delphi , pascal , pas | shBrushDelphi.js | |
diff&patch | diff patch | shBrushDiff.js | 用代码版本库时,遇到代码冲突,其语法就是这个. |
Erlang | erl , erlang | shBrushErlang.js | |
Groovy | groovy | shBrushGroovy.js | |
Java | java | shBrushJava.js | |
JavaFX | jfx , javafx | shBrushJavaFX.js | |
JavaScript | js , jscript , javascript | shBrushJScript.js | |
Perl | perl , pl , Perl | shBrushPerl.js | |
PHP | php | shBrushPhp.js | |
text | text , plain | shBrushPlain.js | 就是普通文本. |
Python | py , python | shBrushPython.js | |
Ruby | ruby , rails , ror , rb | shBrushRuby.js | |
SASS&SCSS | sass , scss | shBrushSass.js | |
Scala | scala | shBrushScala.js | |
SQL | sql | shBrushSql.js | |
Visual Basic | vb , vbnet | shBrushVb.js | |
XML | xml , xhtml , xslt , html | shBrushXml.js | |
Objective C | objc , obj-c | shBrushObjectiveC.js | |
F# | f# f-sharp , fsharp | shBrushFSharp.js | |
xpp , dynamics-xpp | shBrushDynamics.js | ||
R | r , s , splus | shBrushR.js | |
matlab | matlab | shBrushMatlab.js | |
swift | swift | shBrushSwift.js | |
GO | go , golang | shBrushGo.js |
整理完又发现好几个没听说过的语言.里面有个xpp
,我没查出来是个啥语言,如果谁知道烦劳留言告知.