Handsome 主题样式与增强功能一览

2018-11-11T19:16:00

这篇文章集中说明主题 Handsome 所支持的 Markdown 语法和相关增强功能。

Markdown 基础效果

标题

H4

H5
H6

段落

使用单引号 * 或者单下划线 _ 标记 斜体强调 或者 斜体强调

使用两个引号 ** 或者两个下划线 __ 标记 加粗强调 或者 加粗强调

引号和下划线可叠加使用 → 只是加粗 斜体并加粗

使用两个波浪线 ~~ 标记 已删除文字

插入文字暂无 Markdown 标记,直接使用 HTML 标签 <ins> 标记 插入文字

行内代码使用反引号标记 → print("hello world")

上标 X2 / 下标 X2

按键 Ctrl

外链 Quanyin's blog

参考资料 12

注意:你可以通过 {#section-id} 方式自定义段落锚点

列表

以下的无序、有序和任务列表均支持二级嵌套,不建议使用二级以上嵌套。

无序列表

  • 无序列表

    • 嵌套的无序列表
    • 嵌套的无序列表
  • 无序列表

    1. 嵌套的有序列表
    2. 嵌套的有序列表
  • 无序列表

有序列表

  1. 有序列表

    1. 嵌套的有序列表
    2. 嵌套的有序列表
  2. 有序列表

    • 嵌套的无序列表
    • 嵌套的无序列表
  3. 有序列表

任务列表(暂不支持)

  • [ ] Cmd Markdown 开发

    • [ ] 改进 Cmd 渲染算法,使用局部渲染技术提高渲染效率
    • [ ] 支持以 PDF 格式导出文稿
    • [x] 新增Todo列表功能 语法参考
    • [x] 改进 LaTex 功能
    • [x] 修复 LaTex 公式渲染问题
    • [x] 新增 LaTex 公式编号功能 语法参考
  • [ ] 七月旅行准备

    • [ ] 准备邮轮上需要携带的物品
    • [ ] 浏览日本免税店的物品
    • [x] 购买蓝宝石公主号七月一日的船票

引用

野火烧不尽,春风吹又生.

代码

代码语法高亮演示。

function helloWorld () {
  alert("Hello, World!")
}
public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}
#include <stdio.h>
/* Hello */
int main(void){
  printf("Hello, World!");
  return 0;
}
// 'Hello World!' program
#include <iostream>
int main(){
  std::cout << "Hello World!" << std::endl;
  return 0;
}
<html>
<body>
  Hello, World!
</body>
</html>
<?php
  echo 'Hello, World!';
?>
print("Hello, World!")

分割线


表格

使用 Markdown 画的表格,如下表

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

增强功能

数学公式

主题使用了 MathJax 开源库来实现对数学公式的支持,使用 $$ 标记。

目前只能全局启用,先禁用
通过自定义字段实现了单篇文章启用
//块级公式:
$$ 公式内容 $$
$$    x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

// 行内公式:
$ 行内公式内容 $ 
\\( 行内公式内容 \\)

$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

\\( x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}  \\)

//块级公式:
$$ 公式内容 $$
$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

// 行内公式:
$ 行内公式内容 $
\( 行内公式内容 \)

$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

\( x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} \)

文章中插入按钮

[button]矩形按钮文字[/button]
[button color="succees"]矩形按钮文字[/button]
[button type="round" color="success"]椭圆形按钮文字[/button]
[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]

[button]矩形按钮文字[/button]
[button color="succees"]矩形按钮文字[/button]
[button type="round" color="success"]椭圆形按钮文字[/button]
[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]

文章内插入音乐

[hplayer media="netease" id="22551736" type="song" size="large" auto="false" /]

[hplayer media="netease" id="22551736" type="song" size="large" auto="false" /]

文章内插入视频

[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]

文章内调用其他文章

[-post cid="1" -/]

[post cid="1" /]

隐藏回复可见

[-hide-]隐藏内容[/-hide-]

[hide]如果你可到这里的内容,说明你已经回复了本文章[/hide]

短代码高亮文本

[scode type="share"]这是灰色的短代码框,常用来引用资料什么的[/scode]
@> 这是灰色的短代码框,常用来引用资料什么的
[scode type="yellow"]这是黄色的短代码框,常用来做提示,引起读者注意。[/scode]
!> 这是黄色的短代码框,常用来做提示,引起读者注意。
[scode type="red"]这是红色的短代码框,用于严重警告什么的。[/scode]
x> 这是红色的短代码框,用于严重警告什么的。
[scode type="lblue"]这是浅蓝色的短代码框,用于显示一些信息。[/scode]
i> 这是浅蓝色的短代码框,用于显示一些信息。
[scode type="green"]这是绿色的短代码框,显示一些推荐信息。[/scode]
√> 这是绿色的短代码框,显示一些推荐信息。

@> 这是灰色的短代码框,常用来引用资料什么的

!> 这是黄色的短代码框,常用来做提示,引起读者注意。

x> 这是红色的短代码框,用于严重警告什么的。

i> 这是浅蓝色的短代码框,用于显示一些信息。

√> 这是绿色的短代码框,显示一些推荐信息。

收缩框

[-collapse title="标题" status="false"]一些文字内容[/collapse-]

[collapse title="标题" status="false"]一些文字内容[/collapse]

更换主题之后,本页代码失效,主题样子已不再,截图以留念
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »