使用小书匠代码语法高亮功能，写出更加容易阅读的代码

使用小书匠代码语法高亮功能，写出更加容易阅读的代码

小书匠

代码高亮

语法

小书匠代码语法

commonmarkdown的代码语法

1. 在每行的开头使用4个空格代表代码块

例如下面的代码

 var str = 'hello world';

转换成html后：

var str = 'hello world';

2. 使用 ` 包裹的代码来表示行内代码

如下面的代码

这是一个行内代码的示例var str = 'good luck'。

GFM(Github Flavored Markdown)的代码语法^[1]

1. 通过 ``` 包裹的代码来表示代码块，与commonmarkdown的块代码语法不同的是代码块可以不需要4个空格做为起启行。

例如下面的代码

```
var str = 'hello world';
```

转换成html后：

var str = 'hello world';

2. GFM的代码语法还可以指定高亮代码所使用的语言，语法为在每个 ``` 后面添加想定义的语言。commonmarkdown的代码块或者未指定语言的GFM代码块，系统将自动根据代码的内容来判断使用哪种语言。建议用户在输入代码块时，指明使用哪种语言，避免系统在判断语言时出现不一致的结果。

例如下面的代码

```java
private string str = "hello world";
System.out.println(str);
```

转换成html后

private string str = "hello world";
System.out.println(str);

小书匠扩展的代码语法高亮

现在的markdown定义在代码语法上的不足

我们在使用markdown写技术文章时，对于代码的展示，前面提到的语法已经满足大部份的需求。不过有时我们想突出代码里某一部份内容时，由于代码块里的内容是不再支持markdown语法，所以像这样的需求我们就不能通过一般的markdown语法来实现了。常用的解决方案有指明第几行，第几个字符来说明需要注意的地方。这种方案虽然可以解决想要表达的内容，但还是很不尽人意，万一我的代码需要变化，原本指定的行数已经不一致了怎么办，再有就是让阅读者留意哪一行哪个字符，也影响了阅读体验，特别是代码内容特别多的地方时，用户找起作者想要突出的地方，也要花上一些时间。

小书匠在代码语法上的改进

通过 设置 里的语法扩展，用户可以开启 段代码文字格式 功能，来解决上面提到的不足，或者在每篇文章的元数据里，添加grammar_code: true 来针对特定文章开启该代码块文字格式功能。

例如下面的代码，我想告诉读者，在去掉字符串首尾空格的方法上，javascript与python的区别

javascript代码实现：

var str = ' hello world ';
str = str.trim()

python代码实现

str = ' hello world '
str = str.trip()

这样，用户不管是在markdown原文件上看，还是在通过渲染成html页面上看，都能很快的找到作者想要特别提醒的地方。

当然，你可能会说，这样的代码，用户不需要提醒，也能很快的找到区别。如果我把代码再增加些，用户可能就不是那么容易的找出作者想要提示的地方了。

例如下面的代码，我想告诉读者，在java里，怎么实现重载。

class DisplayOverloading {
    public void disp(char c) {
         System.out.println(c);
    }
    public void disp(char c, int num) {
         System.out.println(c + " "+num);
    }
    public void disp(int num, char c) {
       System.out.println("I’m the second definition of method disp" );
   }
    public void disp(int c) {
       System.out.println(c );
    }
}
class Sample {
   public static void main(String args[]) {
       DisplayOverloading obj = new DisplayOverloading();
       obj.disp('a');
       obj.disp('a',10);
       obj.disp(10);
       obj.disp(10, 'a')
   }
}

如果没有段代码格式的功能，想比较清楚的描述需要突出的位置，还是比较费劲的，读者想很快的定位到disp 方法，由于代码内容比较多，也就没办法像前面一个例子那样，很快的定位到作者想要指明的地方了。

下面再找一个例子，展示代码语法扩展上的其他功能。

例如下面的代码^[2]，展示了javascript语法上哪些是不建议的格式，哪些是提倡的格式

function getXMLgetXml () {}
function getIDgetId () {}
function getHTMLgetHtml () {}
var XMLDocumentxmlDocument;

小书匠支持的代码语法

目前支持的代码语法扩展有

1. 代码内添加：>>++要添加的内容++<<

2. 代码内删除：>>~~要删除的内容~~<<

3. 代码内高亮：>>==要高亮的内容==<<

4. 代码内加粗：>>**要加粗的内容**<<

例如下面的代码

var str = 'hello ';
var strname = 'world';
console.log(str + name);
//hello world 

注： 代码内格式仅支持块代码。

如何修改渲染后的代码样式

1. 系统使用highlight.js来进行代码高亮输出，内置了20多种样式供用户选择，用户可以通过 设置 里的 预览区代码高亮样式 来选择想要的高亮方案。如果你对css有一定了解，也可以在 预览区自定义样式 里修改自己想要代码高亮效果。不想使用现有的代码高亮方式，可以选择禁用代码高亮。

2. 用户也可以通过预览区的 自定义css样式 按钮，针对每篇文章进行样式的单独设置。

1. https://help.github.com/articles/github-flavored-markdown/#fenced-code-blocks ↩

2. http://www.html-js.com/article/The-little-front-end-tw93-JavaScript-programming-specification--naming-conventions ↩