缘起

今年发现博客园支持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("brush:") >= 0 && (n=!0, t.indexOf("gutter:true;") >= 0 && $(this).parent().addClass("sh-gutter"))
    }), n) && (SyntaxHighlighter.autoloader.apply(null, shBushPathPrepare("applescript\t\t\t @shBrushAppleScript.js", "actionscript3 as3\t\t@shBrushAS3.js", "bash shell\t\t\t\t@shBrushBash.js", "coldfusion cf\t\t\t@shBrushColdFusion.js", "cpp c\t\t\t\t\t@shBrushCpp.js", "c# c-sharp csharp\t\t@shBrushCSharp.js", "css\t\t\t\t\t @shBrushCss.js", "delphi pascal pas\t\t@shBrushDelphi.js", "diff patch \t\t@shBrushDiff.js", "erl erlang\t\t\t\t@shBrushErlang.js", "groovy\t\t\t\t\t@shBrushGroovy.js", "java\t\t\t\t\t @shBrushJava.js", "jfx javafx\t\t\t\t@shBrushJavaFX.js", "js jscript Javascript\t@shBrushJScript.js", "perl pl Perl\t\t\t\t@shBrushPerl.js", "php\t\t\t\t\t @shBrushPhp.js", "text plain\t\t\t\t@shBrushPlain.js", "py python\t\t\t\t@shBrushPython.js", "ruby rails ror rb\t\t@shBrushRuby.js", "sass scss\t\t\t\t@shBrushSass.js", "scala\t\t\t\t\t@shBrushScala.js", "sql\t\t\t\t\t @shBrushSql.js", "vb vbnet\t\t\t\t @shBrushVb.js", "xml xhtml xslt html\t @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,我没查出来是个啥语言,如果谁知道烦劳留言告知.

关于作者