zoukankan      html  css  js  c++  java
  • 使用小书匠代码语法高亮功能,写出更加容易阅读的代码

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

     

     

    小书匠代码语法

    commonmarkdown的代码语法

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

    例如下面的代码

        var str = 'hello world';
    

    转换成html后:

    var str = 'hello world';
    
    1. 使用 ` 包裹的代码来表示行内代码

    如下面的代码

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

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

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

    例如下面的代码

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

    转换成html后:

    var str = 'hello world';
    
    1. 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样式 按钮,针对每篇文章进行样式的单独设置。


  • 相关阅读:
    pip下载速度慢&如何使用国内源提高速度
    pip更新安装删除包
    如何让VSCode同时打开(显示)多个项目
    JavaScript计算器
    在Ubuntu下搭建Android开发环境(AndroidStudio)
    在Windows中安装vim
    硬盘分区教程
    如何在Windows系统下使用you-get下载网上的媒体资源
    mencoder及ffmpeg的基本命令
    笔记本如何不按Fn键就能实现F键的功能
  • 原文地址:https://www.cnblogs.com/suziwen/p/4504852.html
Copyright © 2011-2022 走看看