180 lines
4.4 KiB
Markdown
180 lines
4.4 KiB
Markdown
|
# amWiki 与语法高亮
|
|||
|
|
|
|||
|
|
amWiki使用 [highlight.js](https://github.com/isagalaev/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": "海珠区新港中路" //位置
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
添加 `js`、`javascript` 标记后的效果：
|
|||
|
|
```javascript
|
|||
|
|
//发送验证码
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
```js
|
|||
|
|
{
|
|||
|
|
"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` 标记后的效果：
|
|||
|
|
```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` 标记后的效果：
|
|||
|
|
```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` 标记后的效果：
|
|||
|
|
```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` 标记后的效果：
|
|||
|
|
```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` 标记后的效果：
|
|||
|
|
```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");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|