amWiki 与语法高亮

amWiki使用 highlight.js 进行预语法高亮渲染,它能对多达一百多种语言、样式提供语法高亮解析
使用两组每组三个反引号分单独两行将代码包围起来,并在第一组反引号后写上语言类型即可使用语法高亮,例如: js //some js code here

javascript / js 代码

普通代码块效果:

//发送验证码
function cd(num) {
    $('#code').val(num + '秒后可重发');
    setTimeout(function() {
        if (num - 1 >= 0) {
            cd(num - 1);
        } else {
            $('#code').removeClass('bg-gray').prop('disabled', false).val('重新发送验证码');
        }
    },
    1000);
}
{
    "state": {
        "code": 10200,                   //code状态码
        "msg": "ok"                      //状态描述
    },
    "data": {
        "team_num": 13,                  //队伍数
        "position": "海珠区新港中路"      //位置
    }
}

添加 jsjavascript 标记后的效果:

//发送验证码
function cd(num) {
    $('#code').val(num + '秒后可重发');
    setTimeout(function() {
        if (num - 1 >= 0) {
            cd(num - 1);
        } else {
            $('#code').removeClass('bg-gray').prop('disabled', false).val('重新发送验证码');
        }
    },
    1000);
}
{
    "state": {
        "code": 10200,                   //code状态码
        "msg": "ok"                      //状态描述
    },
    "data": {
        "team_num": 13,                  //队伍数
        "position": "海珠区新港中路"      //位置
    }
}

amWiki对javascript代码片段做了再次增强,可以点击代码块右上角按钮隐藏/显示注释
当注释处于隐藏状态时不会被复制,比较适合模拟返回json数据的接口时直接拷贝(json不允许注释)

Html 代码

普通代码段效果:

<body>
    <div class="loading"><img src="/assets/images/loading.gif"></div>
    <header>some text</header>
    <script type="text/javascript" src="/assets/js/jquery-2.1.4.min.js"></script>
</body>

添加 html 标记后的效果:

<body>
    <div class="loading"><img src="/assets/images/loading.gif"></div>
    <header>some text</header>
    <script type="text/javascript" src="/assets/js/jquery-2.1.4.min.js"></script>
</body>

css 代码

普通代码段效果:

/* 紧凑 */
html,body{display:block;width:100%;height:100%;min-width:320px;}
a,img{-webkit-touch-callout:none;}
/* 展开 */
input[type="button"],
input[type="submit"],
input[type="reset"],
textarea {
    -webkit-appearance: none;
}

添加 css 标记后的效果:

/* 紧凑 */
html,body{display:block;width:100%;height:100%;min-width:320px;}
a,img{-webkit-touch-callout:none;}
/* 展开 */
input[type="button"],
input[type="submit"],
input[type="reset"],
textarea {
    -webkit-appearance: none;
}

php 代码

普通代码段效果:

private function addQuestData($data, $filing_id)
  {
    $quest_num = $data['status'] == 10 ? 1 : 2;
      $where = [
        ['user_filing_id', '=', $filing_id],
        ['project_id', '=', $data['project_id']],
        ['mobile','=', $data['mobile']],
        ['quest_num', '=', $quest_num]
      ];
  }

添加 php 标记后的效果:

private function addQuestData($data, $filing_id)
  {
    $quest_num = $data['status'] == 10 ? 1 : 2;
      $where = [
        ['user_filing_id', '=', $filing_id],
        ['project_id', '=', $data['project_id']],
        ['mobile','=', $data['mobile']],
        ['quest_num', '=', $quest_num]
      ];
  }

sql 代码

普通代码段效果:

SELECT Company, OrderNumber FROM Orders ORDER BY Company, OrderNumber

添加 sql 标记后的效果:

SELECT Company, OrderNumber FROM Orders ORDER BY Company, OrderNumber

java 代码

普通代码段效果:

public class Test {
   public static void main(String args[]) {
      int x = 10;
      while( x < 20 ) {
         System.out.print("value of x : " + x );
         x++;
         System.out.print("\n");
      }
   }
}

添加 java 标记后的效果:

public class Test {
   public static void main(String args[]) {
      int x = 10;
      while( x < 20 ) {
         System.out.print("value of x : " + x );
         x++;
         System.out.print("\n");
      }
   }
}
Editing is enabled. Use the "Save changes" button below the editor to commit modifications to this file.