Markdown使用指南

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。本文主要介绍目前各种Markdown编辑器平台的优缺点,以及一些常用Markdown语言。

Markdown编辑器

国产 Markdown 软件的数量虽然不多,但质量都很高,比如 MWebMarkEditor,也已有着各自的稳定用户群。Ulysses 的付费策略似乎让大家很不爽,网络上又开始聊起了「有哪些好用的 Markdown 工具」的话题。

在线编辑器推荐使用Cmd Markdown编辑器,WIN离线编辑器推荐使用Atom(配合GIT BLOG使用)和CuteMarkEd

Markdown在线编辑器

大体语法一致,有些功能不支持。

作业部落 Cmd Markdown

作业部落 Cmd Markdown 主页地址:实时更新预览,推荐用于快速编辑分享

  • 支持公式、TOC等高级功能,支持公开分享链接。页面干净。推荐使用。
  • 没有批量导出功能,没有独立博客主页面。

有道云笔记

有道云笔记主页地址推荐用于笔记保存

小书匠

小书匠主页地址

  • 支持高级功能,支持云笔记存储,支持ppt/pdf等导出。可以结合有道云笔记使用,支持公开分享链接;
  • 加载缓慢,页面元素过多。存储到有道云笔记后目录无法跳转链接,Mac下的预览显示好像有些问题。

Markdown Plus

Markdown Plus主页地址

  • 支持高级功能;
  • 不支持公开分享。

MaHua

MaHua是一个在线编辑markdown文档的编辑器,向Mac下优秀的markdown编辑器mou致敬

  • 方便的导入导出功能
    • 直接把一个markdown的文本文件拖放到当前这个页面就可以了
    • 导出为一个html格式的文件,样式一点也不会丢失
  • 编辑和预览同步滚动,所见即所得(右上角设置)
  • VIM快捷键支持,方便vim党们快速的操作 (右上角设置)
  • 强大的自定义CSS功能,方便定制自己的展示
  • 有数量也有质量的主题,编辑器和预览区域
  • 完美兼容Github的markdown语法
  • 预览区域代码高亮
  • 所有选项自动记忆

马可飞象

马可飞象主页地址

  • 专为印象笔记打造的Markdown编辑器,支持公式、TOC等高级功能。
  • 不支持公开分享链接,印象笔记账户等级限制存储空间。一年68元的费用,不续费就无法跟 Evernote 同步。平台迁移时图片有障碍。

简书

简书主页地址

  • 博客功能方便,独立博客主页面,支持公开分享链接,支持图片上传。
  • 不支持公式、TOC等高级功能。平台迁移时图片有障碍。

CSDN

CSDN主页地址

  • 博客功能方便,独立博客主页面,支持公开分享链接,支持图片上传。
  • 预览模式下发现文字是两段对齐(链接过长后特别丑),发表后是正常显示。列表的文字部分不回车导致字体颜色异常。添加标签却是发布的时候添加,不能再文档里实现。使用代码块的时候字体显示异常。总之,自我感觉不好用。
  • 欢迎使用CSDN-markdown编辑器CSDN-markdown基本语法说明

其他

Online Markdown Editor- Dillinger, the Last Markdown Editor ever. 不支持同步预览。

当你在使用别的网站的富文本编辑器时(比如 印象笔记、云笔记、各种Discuz论坛的高级编辑模式…),点击Magic Bookmarklet书签,就可以开始享受别致的输入了。

Markdown离线编辑器

Atom

Our goal is a zero-compromise combination of hackability and usability: an editor that will be welcoming to an elementary school student on their first day learning to code, but also a tool they won't outgrow as they develop into seasoned hackers.

推荐使用,可以实现Git命令

  • 下载atom,并安装 Visual Studio。

  • 呼出Panel对话框(Ctrl + Shift + P),跟Sublime Text是一样的。

  • 打开settings界面,点击左侧栏的Install按钮。然后在搜索框中输入关键字markdown,点击packages开始搜索,点击安装即可。由于墙内原因,无法顺利安装。

  • 离线安装packages

    1. 到对应的github仓库下载压缩文件解压
    2. 运行CMD,CD到对应文件夹
    3. 运行npm install,不要用apm install,重启。
  • 重启ATOM

常用插件(都可以在 Settings > Install 里面找到),更多参考:Atom:优雅迷人的编辑神器Atom 有什么优秀插件?

  • markdown-preview-enhanced,包含markdown-scroll-sync,自动显示latex公式,可以输出公式格式。建议使用。安装后在设置面板使用Pandoc parserMarkdown Preview En hanced使用指南

  • markdown-writer:方便管理图片、链接等,解决win系统的快捷键问题。建议使用,安装后Ctrl + Shift + P运行Markdown Writer: Create Default keymaps并重启。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    "shift-ctrl-K": "markdown-writer:insert-link"
    "shift-ctrl-I": "markdown-writer:insert-image"
    "ctrl-i": "markdown-writer:toggle-italic-text"
    "ctrl-b": "markdown-writer:toggle-bold-text"
    "ctrl-'": "markdown-writer:toggle-code-text"
    'ctrl-`': "markdown-writer:toggle-codeblock-text"
    "ctrl-h": "markdown-writer:toggle-strikethrough-text"
    "ctrl-1": "markdown-writer:toggle-h1"
    "ctrl-2": "markdown-writer:toggle-h2"
    "ctrl-3": "markdown-writer:toggle-h3"
    "ctrl-4": "markdown-writer:toggle-h4"
    "ctrl-5": "markdown-writer:toggle-h5"
  • git-control,包括了比较,提交,撤销,获取,拉取,推送,合并,分支,版本发布等。 建议使用

  • Atom-Hexo,Provides Hexo new, generate, deploy, publish, clean commands in the Atom Editor. set the Atom-Hexo Current Working Directory config on the Settings view, you can use Atom-Hexo anywhere, once and for all. 建议使用,设置插件目录 Current Working Directory。在Atom中执行cmd-shift-P,输入对应的命令即可实现部署。在当前文件打开时执行命令只能部署当前文件。要想部署全部,需要关闭全部文件窗口
    • hexo new // Create a new post,格式与博客文件头/scaffolds/post.md一致。
    • hexo publish // Publish a draft post
    • hexo generate // Generate static files
    • hexo deploy // Generate static files and deploy
    • hexo clean // Clean the cache file and generated files
  • language-markdown:提供 Github Flavored Markdown 等 MD 高亮支持

  • markdown-scroll-sync:将 markdown-preview 的编辑区和预览区同步滚动。markdown-preview:内置的编辑实时预览插件,不支持显示latex公式。Markdown Preview Plus,支持显示latex公式。
    • Search for and install markdown-preview-plus in Atom's Settings view.
    • Search for and disable the built-in package markdown-preview.
    • (Optional) Install and enable Pandoc.
    • Toggle Preview: ctrl-shift-m
    • Toggle Math Rendering: ctrl-shift-x。Math Rendering Settings 可以指定两种不同parser:MathJax和Pandoc。Pandoc,堪称文档转换的瑞士军刀。勾选markdown-preview-plus/Settins/Enable Pandoc Parser,然后在Pandoc Options: Path输入pandoc的路径,如*nix系统可通过which pandoc获取。如果想获取公式渲染后的页面,那么在普通markdown渲染的基础上,还需要键入Ctrl+Shift+X以完成公式的渲染。
  • tool-bar-markdown-writer,提供markdown写作工具栏,替代输入指令,必须先安装tool-bar和markdown-writer packages,然后安装tool-bar markdown-writer。

  • markdown-table-formatter,格式化表格

  • markdown-toc,生成文章目录,对于github博客来说左右不大。

  • atom-pandoc-convertPandoc 是一个在多种标记语言间相互转换的通用工具,可以在常见的 Markdown、HTML、PDF、EPUB、DOCX 等格式间相互转换。实现不同文本格式之间的转换。pandoc-markdown 和 markdown 的区别就在于前者支持更多的语法扩展,他可以使用各类 html 的语句来实现更复杂的排版,也可以兼容一些 LaTeX 的语法,这样我们就可以在保持 markdown 使用 Pandoc 转换 Markdown 文档。(无法运行成功)

  • markdown-pdf,输出为PDF文件。在Markdown Preview Plus环境中无法使用,需要markdown-preview atom package

  • markdown-themeable-pdf,输出为PDF文件,公式不支持打印。遇到问不能转换PDF时,打开cmd,执行 npm install phantomjs-prebuilt,看到看到Done. Phantomjs binary available at C:\Users\wxl\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe,重启atom。点击右键选择Markdown to PDF,即可。

CuteMarkEd

A Qt-based, free and open source Markdown editor with live HTML preview, math expressions, code and markdown syntax highlighting. See the features page for more information. 离线浏览时推荐使用,不过内容过多时,反应速度慢,同步预览存在差距。CuteMarkEd下载地址

Sublime text

安装SUBLIME TEXT

安装插件首先要安装 Package Control,Installation。Package Control 可以说是Sublime Text 的必备插件。所有其他的插件都可以通过 Package Control 来安装和管理。Sublime Text 其他插件,Package Control。插件安装方式分在线和本地安装,前端学习日志-Sublime Text 2安装插件方法详解

安装成功后,可在Preferences -> Package Settings看到Package Control。按 Ctrl+Shift+P 呼出 Command Palette 然后找到 remove package 即可删除对应的Package 。

在 package control 输入 markdown preview 搜索 Markdown Preview, Markdown HTML Preview, GitHub Flavored Markdown Preview, OmniMarkupPreviewer, 这些插件都是在需要预览的时候,敲个快捷键在浏览器里面查看效果。不是我们所要的。

markdown preview默认没有快捷键,我们可以自己为preview in browser设置快捷键。方法是在Preferences -> Key Bindings User打开的文件的中括号中添加以下代码(可在Key Bindings Default找到格式): { "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"} } 其中,"alt+m"可设置为自己喜欢的按键。

实现浏览器同步预览

  • 安装 Markmon

在 Sublime Text 中,按 Ctrl+Shift+P 呼出 Command Palette 然后找到 Package Control: Install Package ,等待列表加载完毕后输入 Markmon 回车即可安装。本地安装:下载地址GitHub

  • npm 安装 markmon

下载 node,npm 一般随着 node 安装 就自动安装了。启动CMD,node -vnpm -v 测试安装。输入 npm install -g markmon 安装 markmon (npm)。参考 node 和 npm 安装使用

  • 安装 pandoc

下载地址,这个转换器负责 markdown 语法转到 html 语法,实时监控文件编辑,以便实时预览。

  • 配置 Package Settings

Preferences->Package Settings->Markmon->Settings - User,编辑文件如下:{ "executable": "markmon.cmd", }

  • 重启 Sublime

通过菜单 Tools > markmo > Launch,或者 Control+Shift+P:Markmon launch。 在浏览器会打开 localhost:3000 页面,对于 Sublime 中的改变,你就会在浏览器中实时看到。Sublime 切换文件的同时,浏览器也会自动跟随切换,方便。

(未调试成功).你可以在 Sublime Text 内通过 Package Control 输入 Install Package 来安装 OmniMarkupPreviewer, 也可以从其 Github主页 下载压缩包,解压到 Sublime Text 的 Packages 目录即可完成安装。使用方法: Sublime Text 内 Markdown 标签页点击鼠标右键 - 选择Preview Current Markup in Browser。 或者使用快捷键 (OSX ⌘+⌥+O; Windows, Linux: Ctrl+Alt+O) 来预览。设置指南

MarkdownPad

MarkdownPad下载地址

用户可以通过键盘快捷键和工具栏按钮来使用或者移除Markdown格式。MarkdownPad左右栏的分割方式令用户可以实时看到HTML格式的Markdown文档。但是[TOC]和~~删除线无效。破解版下载地址,更多介绍点击查看。

从 Win 8 开始右侧预览页面打不开,解决办法就是安装 Awesomium 1.6.6 SDK,如果还是不行就再安装 Microsoft's DirectX End-User Runtimes (June 2010)。一般只需要安装前者就可以了。

Yu Writer

Yu Writer – 能自动转换粘贴内容为 Markdown 的文本编辑器

Yu 也是一款国人独立开发的 Markdown 编辑器,目前是 beta 版,却已展现出其成熟的一面,且内外兼修。用 官网 上的话来说,Yu Writer 是「一款能找到写作乐趣的 Markdown 文本编辑器」。

你的所有创作都在内置的文档库里,再也不用到处寻找文档。文档库支持全文搜索、支持 Tag(标签)管理。除了可以编辑文档库里的文档,也可以作为纯文本和 Markdown 文本编辑器用于编辑本地文档。

三栏式设计中,左边为文档资源库,中间编辑区,右侧为预览区,你可以只保留编辑区域,也可以变成经典的两栏式,Markdown 的实时预览还是很有必要的。Yu Writer 拥有一个很赞的 Read Mode 阅读模式,随时点下,就开启全屏阅读,对于阅读 .md 文件来说太适合不过了。

你可以随时打开应用开始写作,也可以随时关闭应用,文档是热保存的,再也不会因为忘记手动保存、误操作或者程序崩溃而丢失数据。每次打开应用时还能自动打开上次编辑时的文档以及还原光标位置,方便立即进入书写状态。

文档的编辑全过程,包括每个文字的录入和删除,都会记录下来,真正可以做到回滚到历史上任意版本、任意时刻。还支持重播观看创作的全过程哦!

可以把文档导出为 PDF、Docx、HTML、Text Bundle、图片等格式,还支持导出为 WordPress 或者微信公众号的文章格式。导出 PDF、Docx 和 HTML 时更有多种样式可以选择,用于将文档渲染成不同的风格。

除了默认的原生界面,Yu 自带 3 款皮肤:Carbon、Lime 以及 Night。每一款的配色都非常养眼,特别是夜晚模式,并非个别大牌那样弄个纯黑了事。

Yu Writer 对于图片、代码块以及表格的插入均提供了非常直观的处理方式,再也不需要记那么多的「代码」了——当然,也支持快捷键。图片的插入也很高效,Yu Writer 内置图片管理器,用户可以一股脑把所有文章需要的图片都添加到进来,随着写作进程按需插入。图片管理器缩略图,这样我们就无需在 Finder/文件管理器 和软件之间来回切换那么繁琐了。

非常喜欢 Yu Writer 的一个功能是,你可以直接将网页复制进编辑框,Yu Writer 会自动转换为 Markdown 格式。

Markdown语法

常用的Markdown语法可以查看Cmd Markdown 编辑阅读器

数学公式

Mathjax与LaTex公式简介math.stackexchange.com上名为MathJax basic tutorial and quick reference的问题翻译而来,并有所改动。主要讲述了如何使用MathJax和相关的Latex语法。

编辑TEX公式可以使用在线手写公式转Tex公式在线Latex编辑器和MathType转化。MathType可以轻松的将数学公式转换成LaTex代码,但两者进行转换时也会有些需要注意的问题

更多详细内容可以点击查看Latex公式使用技巧Cmd Markdown 公式指导手册markdown编辑器使用LaTex数学公式

MathJax渲染器

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。著名的Stackoverflow网站上的漂亮公式,就是使用了MathJax插件的效果。添加MathJax插件也非常简单,只需要在markdown文件中,添加MathJax CDN,就可以在md文件中插入Tex格式的公式了。

1
2
3
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

行间公式的形式为

1
$$ 此处插入公式 $$

行内公式的形式为

1
\\( 此处插入公式 \\)

Markdown Pad显示数学公式

之前的博文有推荐Markdown Pad 2作为Window下的Markdown编辑器。如果你是使用该软件作为markdown的编辑器,你只需要在软件的Tools-> Options-> Advanced-> HTML Head Editor中添加上述的MathJax CDN即可。这样你就不必每次都在md文件中重复添加了。

Atom中显示数学公式

点击查看Atom的安装和使用。实测在Atom实时渲染视图下,倘若使用\ref等标签可能无法正常显示公式,但是只要公式编写正确,在其他网站,如在线Latex编辑器测试通过,那么就不必担心,猜测可能是markdown-preview-plus或者Atom的bug。另外,如果是通过apm安装的package,卸载时需要通过apm uninstall {package_name}或者rm -rf .apm/{package_name}/,通过GUI界面卸载可能会出现问题。

Markdown Preview Plus插件

Markdown Preview Plus插件支持显示latex公式。

  • Search for and install markdown-preview-plus in Atom's Settings view.
  • Search for and disable the built-in package markdown-preview.
  • (Optional) Install and enable Pandoc.
  • Toggle Preview: ctrl-shift-m
  • Toggle Math Rendering: ctrl-shift-x。Math Rendering Settings 可以指定两种不同parser:MathJax和Pandoc。Pandoc,堪称文档转换的瑞士军刀。勾选markdown-preview-plus/Settins/Enable Pandoc Parser,然后在Pandoc Options: Path输入pandoc的路径,如*nix系统可通过which pandoc获取。如果想获取公式渲染后的页面,那么在普通markdown渲染的基础上,还需要键入Ctrl+Shift+X以完成公式的渲染。

Markdown-preview-enhanced插件

Markdown-preview-enhanced,包含markdown-scroll-sync插件,自动显示latex公式,可以输出公式格式。建议使用。安装后在设置面板使用Pandoc parser。

Hexo中显示数学公式

Markdown本身没有支持Latex,hexo先用marked.js渲染,然后再交给MathJax渲染。

hexo-renderer-marked环境下,Hexo内置的Mathjax开启方式:

在主题配置文件~/blog/themes/next/_config.yml中设置:不要按照官方教程中设置七牛cdn,提供诸如jQuery、Bootstrap、cloudflare的CDN服务。

1
2
3
4
5
mathjax:
enable: true
per_page: true
cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
或者 //cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

Hexo内置的Mathjax开启后还是无法显示公式。在marked.js渲染的时候下划线_是被escape掉并且换成了<em>标签,即斜体字,另外LaTeX中的\\也会被转义成一个\,这样会导致MathJax渲染时不认为它是一个换行符了。所以这个错误是由Markdown渲染器引起的。我们要做的是怎样解决 MarkdownMathjax 的一些冲突的问题,接下来介绍一些常用的方法。推荐使用pandoc渲染器MathJax渲染器改进

手动修改转义符

这个方法最直接,需要转义我就转义。比如我需要在公式中写下标符号,那就修改写法写为: $x\_i$;需要换行就使用\\\\。 很明显,这种方式虽然可以解决问题,但通用性很差,比如想迁移到其它地方,就无法识别了,因为大部分的markdown引擎是没有这个问题的。

文章让Hexo在使用Mathjax时支持多行公式提到如何解决这一问题:将换行符\\改写成\\\\

修改渲染源码

具体思路参考了使Marked.js与MathJax共存,其他本地修改策略可以查看在 Hexo 中完美使用 Mathjax 输出数学公式,打开hexo的markdown引擎渲染源码nodes_modules/marked/lib/marked.js,进行如下修改(未测试)。这种方式指标不治本,因为保证不了还可能有其它的字符会冲突。

第一步: 找到下面的代码,去掉\\的转义了。

1
2
3
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,
改为:
escape: /^\\([`*{}\[\]()# +\-.!_>])/,

第二步: 找到em的符号: 去掉_的斜体含义,markdown中有*也可以表示斜体,这样就解决了。

1
2
3
4
5
6
7
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
修改为
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
修改为
em: /^\*(?=\S)([\s\S]*?\S)\*(?!\*)/

使用插件

  • Rawblock插件(未测试)

    issue #524 中,有人提到了可以使用 rawblock 来解决,可是每次要写公式都得在公式前后加上 rawblock 来声明实在太烦了,对于公式大户来说简直要崩溃。

  • Hexo-math插件

    利用MathJax来渲染LaTeX数学公式,首先通过安装Hexo-math插件,然后手动修改marked.js与MathJax并存,之后重新生成和部署网站即可。Gitlab方案无法执行,本地HEXO未测试。

    1
    npm install hexo-math --save
  • Hexo-renderer-markdown-it插件

    为hexo添加上标、下标、脚注等功能使用 hexo-renderer-markdown-it 进行渲染,先卸载Hexo自带的Markdown解析器 hexo-renderer-marked,再安装 hexo-renderer-markdown-it 就可以了。安装完以后,先 hexo clean && hexo g 重新生成静态网页,然后 hexo s 查看,这回公式能正常显示了。

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-markdown-it --save

    但是使用 hexo-renderer-markdown-it 渲染之后,原本为Markdown编写的TOC里的链接都失效了侧边栏的快速导航链接也失效了,也不支持NexT的<!–more–>。本地hexo推送可以参考使用hexo-markdown-it导致文章目录失效的解决方案

  • Hexo-renderer-kramed插件(未测试)

    Hexo-renderer-kramed插件fork了 hexo-renderer-marked 项目,并且只针对MathJax支持进行了改进。卸载 hexo-renderer-marked(注意,如果你使用了其他的渲染插件,请卸载对应的插件),然后安装 hexo-renderer-kramed。这下,不仅能正常使用TOC,也能完美地支持MathJax渲染了。至此,问题得到了解决。

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save

    但关于行内代码,确实还存在一点问题。因为kramed对行内公式的实现就是基于行内代码来做的,也就是说,对于kramed而言,出现 符以后的两个$符之间的部分才会被kramed认为是行内公式(注意,即使没有用两个 符括起来也会被匹配成行内公式,相当容易出bug),要解决这个问题需要修改kramed的渲染机制。而在代码块中这种情况是没问题的,因为kramed里面对行内公式和行间公式的实现机制不同。

    • 首先,我们希望行内公式可以用两个 $ 符标识;
    • 而当我们使用的行内代码中出现两个 $ 符时,它们之间的内容不应被转义为Latex公式,而是应该按原来的内容展示;
    • 同理,在代码块中出现两个 $ 符时,我们也不希望它们之间的内容不应被转义为Latex公式。

使用pandoc引擎

Hexo 默认的渲染器为 marked (hexo-renderer-marked) 渲染器,该渲染器仅支持 md 的基本规范。感兴趣的朋友也不妨去hexo-renderer-pandoc主页看看。Pandoc也可以实现在gitlab自动部署,查看.gitlab-ci.yml文件设置。

本地hexo博客的搭建:

  1. 首先需安装 pandoc 软件。
  2. 然后卸载Hexo自带的Markdown解析器 hexo-renderer-marked,再安装 hexo-renderer-pandoc 就可以了。

    1
    2
    npm un hexo-renderer-marked --save
    npm install hexo-renderer-pandoc --save

更新说明:2018年1月9日,由于hexo-renderer-pandoc更新加入了template设置,需要在站点配置文件~/blog/_config.yml中加入默认配置(已报issues)。

1
2
3
4
5
6
pandoc:
filters:
extra:
template:
meta:
mathEngine:

配置MathJax

在主题配置文件~/blog/themes/next/_config.yml中配置Mathjax(注意CDN地址,相关issues):

1
2
3
4
5
# MathJax Support
mathjax:
enable: true
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

如果CDN失效,可以尝试其他地址,也可以进行如下修改。如果上述配置成功,不必修改以下。

NexT 主题私人定制遵照 Loading and Configuring MathJax 的指引,修改MathJax为纯 JavaScript 代码。对于整个博客网站,只需要载入一次,任何页面都不需要重复载入。

  1. /themes/next/source/js中添加文件custom.js,在custom.js中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    //MathJax
    window.MathJax = {
    AuthorInit: function () {
    MathJax.Hub.Register.StartupHook("Begin",function () {
    MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for (i=0; i < all.length; i += 1) {
    all[i].SourceElement().parentNode.className += ' has-jax';
    }
    });
    });
    }
    };

    window.MathJax = {
    tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    processEscapes: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
    };


    // <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    // jQuery
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML', function()
    {
    // script is now loaded and executed.
    // put your dependent JS here.
    });
  2. 然后在文件/layout/_layout.swig/body前加入以下代码。为了避免首页MathJax加载出错,配合判断条件page.comments使用(需要显示公式的文章一定要设置comments: true)。

    1
    2
    3
    //{% if page.comments %}
    <script type="text/javascript" src="/js/custom.js"></script>
    //{% endif %}

Bug 提醒hexo issues/2064 提到了 连续两个花括号的问题,即两个连续 { {会提示渲染错误Template render error: (unknown path) expected variable end

1
2
$EI=\{{EI}_1,{EI}_2,\cdots,{EI}_V\}$
1+e^{{\mathbf{v}_{w_j}^{'}}^{T}}`

目前暂时解决办法是

  1. 采用\lbrace\rbrace替换原先的{}
  2. 两个{中间加个空格:$\mathrm{cov}_{t_{b}}^{ {}}\left( S(t_{c}),F(t_{c})\right)$,其中空上标 ^{ {}} 无效果,应该改成 ^{\,}。或者使用使用 \ 保留外层花括号:$EI=\{ {EI}_1,{EI}_2,\cdots,{EI}_V\}$

公式测试

基于pandoc渲染和Mathjax纯 JavaScript 代码测试。

行内公式:测试正常。

1
2
行内公式: $R{m \times n} = U{m \times m} S{m \times n} V{n \times n}’$,$d_{1}=\frac{\ln(S_{t}/K)  +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}$。This is an example for $x_mu$ and $y_mu$. This is an example for $x_{mu}$ and $y_{mu}$.
This is an example for $x\_mu$ and $y\_mu$.

行内公式测试: \(R{m \times n} = U{m \times m} S{m \times n} V{n \times n}’\)\(d_{1}=\frac{\ln(S_{t}/K) +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}\)。This is an example for \(x_mu\) and \(y_mu\). This is an example for \(x_{mu}\) and \(y_{mu}\).

行间公式:测试正常。一个$ $公式为行内公式,显示不居中。二个$$ $$公式为行间公式,显示居中。加入转义符就是转义符意思。

1
2
$T(n) = \Theta(n)$
$$T(n) = \Theta(n)$$

\(T(n) = \Theta(n)\)

\[T(n) = \Theta(n)\]

1
2
$$R{m \times n} = U{m \times m} S{m \times n} V{n \times n}’$$
$$R_{m \times n} = U_{m \times m} S_{m \times n} V_{n \times n}'$$

\[R{m \times n} = U{m \times m} S{m \times n} V{n \times n}’\] \[R_{m \times n} = U_{m \times m} S_{m \times n} V_{n \times n}'\]

1
2
3
4
$$d_{1}=\frac{\ln(S_{t}/K)  +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}$$

加markdown转义字符:
$$d\_{1}=\frac{\ln(S\_{t}/K) +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}$$

\[d_{1}=\frac{\ln(S_{t}/K) +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}\]

\[d\_{1}=\frac{\ln(S\_{t}/K) +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}\]

1
2
3
$$T(n) = \Theta(n) + \sum{i=0}^{n-1}{O({n}{i}^2)}$$
$$T(n) = \Theta(n) + \sum_{i=0}^{n-1}{O({n}_{i}^2)}$$
$$T(n) = \Theta(n) + \sum\_{i=0}^{n-1}{O({n}\_{i}^2)}$$

\[T(n) = \Theta(n) + \sum{i=0}^{n-1}{O({n}{i}^2)}\] \[T(n) = \Theta(n) + \sum_{i=0}^{n-1}{O({n}_{i}^2)}\] \[T(n) = \Theta(n) + \sum\_{i=0}^{n-1}{O({n}\_{i}^2)}\]

麦克斯韦方程组查看LaTeX效果:测试正常。

1
2
3
4
5
6
7
8
$$
\begin{eqnarray}
\nabla\cdot\vec{E} &=& \frac{\rho}{\epsilon_0} \\
\nabla\cdot\vec{B} &=& 0 \\
\nabla\times\vec{E} &=& -\frac{\partial B}{\partial t} \\
\nabla\times\vec{B} &=& \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right)
\end{eqnarray}
$$

\[ \begin{eqnarray} \nabla\cdot\vec{E} &=& \frac{\rho}{\epsilon_0} \\ \nabla\cdot\vec{B} &=& 0 \\ \nabla\times\vec{E} &=& -\frac{\partial B}{\partial t} \\ \nabla\times\vec{B} &=& \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right) \end{eqnarray} \]

交叉引用

在HEXO中使用交叉引用,you only need learning how to install Haskell package。

未测试

  • hexo-renderer-pandoc. But there seems some confusion in its readme.md, and you could investigate more deeply by blog.
  • pandoc. You just need to install it if you only use hexo-renderer-pandoc.
  • pandoc-citeproc. You just need to install it if you only use hexo-renderer-pandoc.
  • pandoc-crossref. And its syntax usage when writing your markdown.
  1. Do not use Haskell within windows operation system;
  2. Do not mess up the order of the filters, i.e. pandoc-crossref and pandoc-citeproc, as well as --bibliography. At least when use pandoc in shell, if you mess up the order of them, it won't work as you expect. ( refer to: pandoc, multiple filter)

列表排列

Markdown在使用有序列表和无序列表的时候,如果中间插入其他内容(甚至是子层级的内容),有序列表的自动编码功能以及无序代码的层级功能会遇到问题。解决方法是,有点类似于编程中,通过缩进对齐的方式(通过Tab键),最外层同级别的不需要缩进,然后下一级的都缩进一次(点一次Tab),然后如果还继续细分下一层,那么输入的时候就缩进两次。

第一次测试:(Tab键以[Tab]展示,空格以[空格]展示)

1
2
3
4
5
6
7
8
1.[空格]测试文字1
[Tab]-[空格]测试文字1-1
[Tab]-[空格]测试文字1-2
2.[空格]测试文字2
[Tab]-[空格]测试文字2-1
[Tab][Tab]-[空格]测试文字2-1-1
[Tab][Tab]-[空格]测试文字2-1-2
[Tab]-[空格]测试文字2-2

页面跳转

定义一个锚,其中id="jump_label"是自己设定的该位置标记,可以随意修改。推荐使用div标签实现跳转。

1
2
3
<div id="jump_label"></div>

<span id="jump_label">text</span>
  • 页内跳转

将定义好的位置标记放到要跳转到的地方,Hexo主题不支持内嵌图标显示。

1
2
[这句话是想要跳转到footer处的锚点链接,点击即会跳转](#jump_label)
[<i class="icon-home"></i>](#jump_label)
  • 页间跳转

最直接的方法,jekyll主题博客点击目录标签,复制地址栏地址即可。hexo主题博客需要在目录标签处右键复制链接即可。但是如果存在中文内容,该方法不好看。推荐使用自定义标签方法。

首先,先定义一个锚,然后添加跳转到的页面的链接,再加/#jump_label

1
[现在点击此链接,可实现页间跳转](http://blog.csdn.net/thither_shore/article/details/52185758/#jump_label)

Emoji

1
2
3
:camel:
:blush:
:smile:

脚注

脚注是在需要标记脚注文字的后面增加一个方括号,方括号中的内容必须以 ^ 开头,再接着是数字、字符串标记:

1
Footnotes[^1] have a label[^label] and a definition[^2].

Footnotes1 have a label2 and a definition3.

接着,在文件的任意地方,你可以把这个脚注的内容定义出来:

1
2
3
[^1]: This is a footnote
[^label]: A footnote on "label"
[^2]: The definition of a footnote.

脚注内容定义的形式就是前面引用脚注的内容,接着一个冒号,再接着一个以上的空格或制表符,最后是脚注定义的内容。

A footnote definition may contain multiple lines, paragraphs, code blocks, blockquotes and most any other markdown syntax. The additional line simply must be indented at least an additional four spaces. 脚注定义的内容可以包含多行、段落、代码区块、区块引用和大多数其他 markdown 格式的内容。对于多行的内容只需要简单缩进至少4个空格。

1
2
3
4
5
6
7
8
9
10
[^1]: The first paragraph of the definition.

Paragraph two of the definition.

> A blockquote with
> multiple lines.

a code block

A final paragraph.

By default, the footnote definitions are placed at the end of the resulting HTML document. However, you may want the footnotes in another location within the document. Simply place the following text at that location within your markdown document. 默认情况下,脚注内容位于生成的 HTML 文档末尾。但是,你也许想将脚注内容放在文档的其他位置。只需要将如下内容放在需要的 markdown 文档位置即可。

1
///Footnotes Go Here///

Hexo显示脚注

关于脚注的支持,hexo-footnotes,脚注要人工编号,也不支持 inline 脚注。 Markdown-it 对脚注等支持体验不佳,不仅需要改变渲染器,并且配置复杂,此外还需要 markdown-it-footnote 插件。

  1. 第一种方法,hexo-reference插件,这个插件默认使用的是一个 CDN 的CSS,我给改成本地的了,需要修改的是node_modules/hexo-reference/index.js测试后该插件版式异常,不要使用

    1
    npm install hexo-reference --save
    1
    2
    3
    4
    5
    6
    7
    // Add CDN CSS resources
    hexo.extend.filter.register('after_post_render', function(data) {
    data.content =
    util.htmlTag('link', {rel: 'stylesheet', type: 'text/css', href: '/css/lib/hint.min.css'}) +
    data.content;
    return data;
    });

Pandoc is a universal document converter!对 md 扩展支持让我拜倒,例如脚注的支持部分。需要提醒的是:pandoc 渲染器对 md 的格式要求更加规范些,例如 链接需要用< >括号显式包含;quoteblock 每行必须跟两空格表示换行(如果后续行没有>标记的话)。当然,把 Pandoc’s Markdown 浏览一下是很有必要的,或者 pdf 版本

  1. 第二种方法,使用Pandoc渲染器:

    在文件/layout/_layout.swig/body前加入:

    1
    <script type="text/javascript" src="/js/custom.js"></script>

    /themes/next/source/js中添加文件custom.js,在custom.js中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // 函数: html 中去掉 某 tag 最后那一次出现
    var rmLastElm = function(text, selector) {
    var wrapped = $("<div>" + text + "</div>");
    wrapped.find(selector).last().remove();
    return wrapped.html();
    }
    // 弹出 tip 显示 脚注
    var $fRef = $(".footnoteRef");
    for(let i=0; i<$fRef.length; i++) {
    var sup = $fRef.children("sup")[i]; //work reliably as long as there's exactly one sup per footnotRef
    // var sup = $fRef[i].children("sup"); //a classic Dom Element, so it doesn't have any children method
    sup.onmouseover = function(event) {
    $('.footnoteTip').remove();
    var pTip = document.createElement('div');
    pTip.className = 'footnoteTip'; // CSS
    pTip.innerHTML = rmLastElm(document.getElementById($fRef[i].getAttribute("href").substring(1)).innerHTML,"a");
    document.body.appendChild(pTip);

    var posLeft = event.pageX - 180;
    if (posLeft<0) posLeft = 20;
    var posTop = event.pageY + 20;
    var od = $('.footnoteTip');
    var oH = od.outerHeight();
    var oW = od.outerWidth();
    if(posTop + oH - window.pageYOffset > $(window).height()) posTop = posTop - oH -40;
    if (posLeft + oW > $(window).width()) posLeft = $(window).width() - oW -20; //NexT.Mist pageXOffset=0
    pTip.style.left = posLeft + 'px';
    pTip.style.top = posTop + 'px';

    };

    sup.onmouseout = function(event) {
    $('.footnoteTip').remove();
    };
    }

外链播放器

更多设置,查看音乐外链

字体、字号与颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的!CSDN-markdown编辑器语法——字体、字号与颜色

1
2
3
4
5
6
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
<font color=#00ffff size=72>color=#00ffff</font>
<font color=gray size=72>color=gray</font>

字体颜色名列表

颜色名 十六进制颜色值 颜色
AliceBlue #F0F8FF rgb(240, 248, 255)
AntiqueWhite #FAEBD7 rgb(250, 235, 215)
Aqua #00FFFF rgb(0, 255, 255)
Aquamarine #7FFFD4 rgb(127, 255, 212)
Azure #F0FFFF rgb(240, 255, 255)
Beige #F5F5DC rgb(245, 245, 220)
Bisque #FFE4C4 rgb(255, 228, 196)
Black #000000 rgb(0, 0, 0)
BlanchedAlmond #FFEBCD rgb(255, 235, 205)
Blue #0000FF rgb(0, 0, 255)
BlueViolet #8A2BE2 rgb(138, 43, 226)
Brown #A52A2A rgb(165, 42, 42)
BurlyWood #DEB887 rgb(222, 184, 135)
CadetBlue #5F9EA0 rgb(95, 158, 160)
Chartreuse #7FFF00 rgb(127, 255, 0)
Chocolate #D2691E rgb(210, 105, 30)
Coral #FF7F50 rgb(255, 127, 80)
CornflowerBlue #6495ED rgb(100, 149, 237)
Cornsilk #FFF8DC rgb(255, 248, 220)
Crimson #DC143C rgb(220, 20, 60)
Cyan #00FFFF rgb(0, 255, 255)
DarkBlue #00008B rgb(0, 0, 139)
DarkCyan #008B8B rgb(0, 139, 139)
DarkGoldenRod #B8860B rgb(184, 134, 11)
DarkGray #A9A9A9 rgb(169, 169, 169)
DarkGreen #006400 rgb(0, 100, 0)
DarkKhaki #BDB76B rgb(189, 183, 107)
DarkMagenta #8B008B rgb(139, 0, 139)
DarkOliveGreen #556B2F rgb(85, 107, 47)
Darkorange #FF8C00 rgb(255, 140, 0)
DarkOrchid #9932CC rgb(153, 50, 204)
DarkRed #8B0000 rgb(139, 0, 0)
DarkSalmon #E9967A rgb(233, 150, 122)
DarkSeaGreen #8FBC8F rgb(143, 188, 143)
DarkSlateBlue #483D8B rgb(72, 61, 139)
DarkSlateGray #2F4F4F rgb(47, 79, 79)
DarkTurquoise #00CED1 rgb(0, 206, 209)
DarkViolet #9400D3 rgb(148, 0, 211)
DeepPink #FF1493 rgb(255, 20, 147)
DeepSkyBlue #00BFFF rgb(0, 191, 255)
DimGray #696969 rgb(105, 105, 105)
DodgerBlue #1E90FF rgb(30, 144, 255)
Feldspar #D19275 rgb(209, 146, 117)
FireBrick #B22222 rgb(178, 34, 34)
FloralWhite #FFFAF0 rgb(255, 250, 240)
ForestGreen #228B22 rgb(34, 139, 34)
Fuchsia #FF00FF rgb(255, 0, 255)
Gainsboro #DCDCDC rgb(220, 220, 220)
GhostWhite #F8F8FF rgb(248, 248, 255)
Gold #FFD700 rgb(255, 215, 0)
GoldenRod #DAA520 rgb(218, 165, 32)
Gray #808080 rgb(128, 128, 128)
Green #008000 rgb(0, 128, 0)
GreenYellow #ADFF2F rgb(173, 255, 47)
HoneyDew #F0FFF0 rgb(240, 255, 240)
HotPink #FF69B4 rgb(255, 105, 180)
IndianRed #CD5C5C rgb(205, 92, 92)
Indigo #4B0082 rgb(75, 0, 130)
Ivory #FFFFF0 rgb(255, 255, 240)
Khaki #F0E68C rgb(240, 230, 140)
Lavender #E6E6FA rgb(230, 230, 250)
LavenderBlush #FFF0F5 rgb(255, 240, 245)
LawnGreen #7CFC00 rgb(124, 252, 0)
LemonChiffon #FFFACD rgb(255, 250, 205)
LightBlue #ADD8E6 rgb(173, 216, 230)
LightCoral #F08080 rgb(240, 128, 128)
LightCyan #E0FFFF rgb(224, 255, 255)
LightGoldenRodYellow #FAFAD2 rgb(250, 250, 210)
LightGrey #D3D3D3 rgb(211, 211, 211)
LightGreen #90EE90 rgb(144, 238, 144)
LightPink #FFB6C1 rgb(255, 182, 193)
LightSalmon #FFA07A rgb(255, 160, 122)
LightSeaGreen #20B2AA rgb(32, 178, 170)
LightSkyBlue #87CEFA rgb(135, 206, 250)
LightSlateBlue #8470FF rgb(132, 112, 255)
LightSlateGray #778899 rgb(119, 136, 153)
LightSteelBlue #B0C4DE rgb(176, 196, 222)
LightYellow #FFFFE0 rgb(255, 255, 224)
Lime #00FF00 rgb(0, 255, 0)
LimeGreen #32CD32 rgb(50, 205, 50)
Linen #FAF0E6 rgb(250, 240, 230)
Magenta #FF00FF rgb(255, 0, 255)
Maroon #800000 rgb(128, 0, 0)
MediumAquaMarine #66CDAA rgb(102, 205, 170)
MediumBlue #0000CD rgb(0, 0, 205)
MediumOrchid #BA55D3 rgb(186, 85, 211)
MediumPurple #9370D8 rgb(147, 112, 216)
MediumSeaGreen #3CB371 rgb(60, 179, 113)
MediumSlateBlue #7B68EE rgb(123, 104, 238)
MediumSpringGreen #00FA9A rgb(0, 250, 154)
MediumTurquoise #48D1CC rgb(72, 209, 204)
MediumVioletRed #C71585 rgb(199, 21, 133)
MidnightBlue #191970 rgb(25, 25, 112)
MintCream #F5FFFA rgb(245, 255, 250)
MistyRose #FFE4E1 rgb(255, 228, 225)
Moccasin #FFE4B5 rgb(255, 228, 181)
NavajoWhite #FFDEAD rgb(255, 222, 173)
Navy #000080 rgb(0, 0, 128)
OldLace #FDF5E6 rgb(253, 245, 230)
Olive #808000 rgb(128, 128, 0)
OliveDrab #6B8E23 rgb(107, 142, 35)
Orange #FFA500 rgb(255, 165, 0)
OrangeRed #FF4500 rgb(255, 69, 0)
Orchid #DA70D6 rgb(218, 112, 214)
PaleGoldenRod #EEE8AA rgb(238, 232, 170)
PaleGreen #98FB98 rgb(152, 251, 152)
PaleTurquoise #AFEEEE rgb(175, 238, 238)
PaleVioletRed #D87093 rgb(216, 112, 147)
PapayaWhip #FFEFD5 rgb(255, 239, 213)
PeachPuff #FFDAB9 rgb(255, 218, 185)
Peru #CD853F rgb(205, 133, 63)
Pink #FFC0CB rgb(255, 192, 203)
Plum #DDA0DD rgb(221, 160, 221)
PowderBlue #B0E0E6 rgb(176, 224, 230)
Purple #800080 rgb(128, 0, 128)
Red #FF0000 rgb(255, 0, 0)
RosyBrown #BC8F8F rgb(188, 143, 143)
RoyalBlue #4169E1 rgb(65, 105, 225)
SaddleBrown #8B4513 rgb(139, 69, 19)
Salmon #FA8072 rgb(250, 128, 114)
SandyBrown #F4A460 rgb(244, 164, 96)
SeaGreen #2E8B57 rgb(46, 139, 87)
SeaShell #FFF5EE rgb(255, 245, 238)
Sienna #A0522D rgb(160, 82, 45)
Silver #C0C0C0 rgb(192, 192, 192)
SkyBlue #87CEEB rgb(135, 206, 235)
SlateBlue #6A5ACD rgb(106, 90, 205)
SlateGray #708090 rgb(112, 128, 144)
Snow #FFFAFA rgb(255, 250, 250)
SpringGreen #00FF7F rgb(0, 255, 127)
SteelBlue #4682B4 rgb(70, 130, 180)
Tan #D2B48C rgb(210, 180, 140)
Teal #008080 rgb(0, 128, 128)
Thistle #D8BFD8 rgb(216, 191, 216)
Tomato #FF6347 rgb(255, 99, 71)
Turquoise #40E0D0 rgb(64, 224, 208)
Violet #EE82EE rgb(238, 130, 238)
VioletRed #D02090 rgb(208, 32, 144)
Wheat #F5DEB3 rgb(245, 222, 179)
White #FFFFFF rgb(255, 255, 255)
WhiteSmoke #F5F5F5 rgb(245, 245, 245)
Yellow #FFFF00 rgb(255, 255, 0)
YellowGreen #9ACD32 rgb(154, 205, 50)

背景色

由于 style 标签和标签的 style 属性都被和谐了(这让Markdown虽然有HTML的躯体,却没有HTML的灵魂!),所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。CSDN-markdown编辑器语法——背景色

1
<table><tr><td bgcolor=#7FFFD4>这里的背景色是:Aquamarine,  十六进制颜色值:#7FFFD4, rgb(127, 255, 212)</td></tr></table>
这里的背景色是:Aquamarine, 十六进制颜色值:#7FFFD4, rgb(127, 255, 212)

背景色列表

颜色名 十六进制颜色值 颜色
AliceBlue #F0F8FF rgb(240, 248, 255)
AntiqueWhite #FAEBD7 rgb(250, 235, 215)
Aqua #00FFFF rgb(0, 255, 255)
Aquamarine #7FFFD4 rgb(127, 255, 212)
Azure #F0FFFF rgb(240, 255, 255)
Beige #F5F5DC rgb(245, 245, 220)
Bisque #FFE4C4 rgb(255, 228, 196)
Black #000000 rgb(0, 0, 0)
BlanchedAlmond #FFEBCD rgb(255, 235, 205)
Blue #0000FF rgb(0, 0, 255)
BlueViolet #8A2BE2 rgb(138, 43, 226)
Brown #A52A2A rgb(165, 42, 42)
BurlyWood #DEB887 rgb(222, 184, 135)
CadetBlue #5F9EA0 rgb(95, 158, 160)
Chartreuse #7FFF00 rgb(127, 255, 0)
Chocolate #D2691E rgb(210, 105, 30)
Coral #FF7F50 rgb(255, 127, 80)
CornflowerBlue #6495ED rgb(100, 149, 237)
Cornsilk #FFF8DC rgb(255, 248, 220)
Crimson #DC143C rgb(220, 20, 60)
Cyan #00FFFF rgb(0, 255, 255)
DarkBlue #00008B rgb(0, 0, 139)
DarkCyan #008B8B rgb(0, 139, 139)
DarkGoldenRod #B8860B rgb(184, 134, 11)
DarkGray #A9A9A9 rgb(169, 169, 169)
DarkGreen #006400 rgb(0, 100, 0)
DarkKhaki #BDB76B rgb(189, 183, 107)
DarkMagenta #8B008B rgb(139, 0, 139)
DarkOliveGreen #556B2F rgb(85, 107, 47)
Darkorange #FF8C00 rgb(255, 140, 0)
DarkOrchid #9932CC rgb(153, 50, 204)
DarkRed #8B0000 rgb(139, 0, 0)
DarkSalmon #E9967A rgb(233, 150, 122)
DarkSeaGreen #8FBC8F rgb(143, 188, 143)
DarkSlateBlue #483D8B rgb(72, 61, 139)
DarkSlateGray #2F4F4F rgb(47, 79, 79)
DarkTurquoise #00CED1 rgb(0, 206, 209)
DarkViolet #9400D3 rgb(148, 0, 211)
DeepPink #FF1493 rgb(255, 20, 147)
DeepSkyBlue #00BFFF rgb(0, 191, 255)
DimGray #696969 rgb(105, 105, 105)
DodgerBlue #1E90FF rgb(30, 144, 255)
Feldspar #D19275 rgb(209, 146, 117)
FireBrick #B22222 rgb(178, 34, 34)
FloralWhite #FFFAF0 rgb(255, 250, 240)
ForestGreen #228B22 rgb(34, 139, 34)
Fuchsia #FF00FF rgb(255, 0, 255)
Gainsboro #DCDCDC rgb(220, 220, 220)
GhostWhite #F8F8FF rgb(248, 248, 255)
Gold #FFD700 rgb(255, 215, 0)
GoldenRod #DAA520 rgb(218, 165, 32)
Gray #808080 rgb(128, 128, 128)
Green #008000 rgb(0, 128, 0)
GreenYellow #ADFF2F rgb(173, 255, 47)
HoneyDew #F0FFF0 rgb(240, 255, 240)
HotPink #FF69B4 rgb(255, 105, 180)
IndianRed #CD5C5C rgb(205, 92, 92)
Indigo #4B0082 rgb(75, 0, 130)
Ivory #FFFFF0 rgb(255, 255, 240)
Khaki #F0E68C rgb(240, 230, 140)
Lavender #E6E6FA rgb(230, 230, 250)
LavenderBlush #FFF0F5 rgb(255, 240, 245)
LawnGreen #7CFC00 rgb(124, 252, 0)
LemonChiffon #FFFACD rgb(255, 250, 205)
LightBlue #ADD8E6 rgb(173, 216, 230)
LightCoral #F08080 rgb(240, 128, 128)
LightCyan #E0FFFF rgb(224, 255, 255)
LightGoldenRodYellow #FAFAD2 rgb(250, 250, 210)
LightGrey #D3D3D3 rgb(211, 211, 211)
LightGreen #90EE90 rgb(144, 238, 144)
LightPink #FFB6C1 rgb(255, 182, 193)
LightSalmon #FFA07A rgb(255, 160, 122)
LightSeaGreen #20B2AA rgb(32, 178, 170)
LightSkyBlue #87CEFA rgb(135, 206, 250)
LightSlateBlue #8470FF rgb(132, 112, 255)
LightSlateGray #778899 rgb(119, 136, 153)
LightSteelBlue #B0C4DE rgb(176, 196, 222)
LightYellow #FFFFE0 rgb(255, 255, 224)
Lime #00FF00 rgb(0, 255, 0)
LimeGreen #32CD32 rgb(50, 205, 50)
Linen #FAF0E6 rgb(250, 240, 230)
Magenta #FF00FF rgb(255, 0, 255)
Maroon #800000 rgb(128, 0, 0)
MediumAquaMarine #66CDAA rgb(102, 205, 170)
MediumBlue #0000CD rgb(0, 0, 205)
MediumOrchid #BA55D3 rgb(186, 85, 211)
MediumPurple #9370D8 rgb(147, 112, 216)
MediumSeaGreen #3CB371 rgb(60, 179, 113)
MediumSlateBlue #7B68EE rgb(123, 104, 238)
MediumSpringGreen #00FA9A rgb(0, 250, 154)
MediumTurquoise #48D1CC rgb(72, 209, 204)
MediumVioletRed #C71585 rgb(199, 21, 133)
MidnightBlue #191970 rgb(25, 25, 112)
MintCream #F5FFFA rgb(245, 255, 250)
MistyRose #FFE4E1 rgb(255, 228, 225)
Moccasin #FFE4B5 rgb(255, 228, 181)
NavajoWhite #FFDEAD rgb(255, 222, 173)
Navy #000080 rgb(0, 0, 128)
OldLace #FDF5E6 rgb(253, 245, 230)
Olive #808000 rgb(128, 128, 0)
OliveDrab #6B8E23 rgb(107, 142, 35)
Orange #FFA500 rgb(255, 165, 0)
OrangeRed #FF4500 rgb(255, 69, 0)
Orchid #DA70D6 rgb(218, 112, 214)
PaleGoldenRod #EEE8AA rgb(238, 232, 170)
PaleGreen #98FB98 rgb(152, 251, 152)
PaleTurquoise #AFEEEE rgb(175, 238, 238)
PaleVioletRed #D87093 rgb(216, 112, 147)
PapayaWhip #FFEFD5 rgb(255, 239, 213)
PeachPuff #FFDAB9 rgb(255, 218, 185)
Peru #CD853F rgb(205, 133, 63)
Pink #FFC0CB rgb(255, 192, 203)
Plum #DDA0DD rgb(221, 160, 221)
PowderBlue #B0E0E6 rgb(176, 224, 230)
Purple #800080 rgb(128, 0, 128)
Red #FF0000 rgb(255, 0, 0)
RosyBrown #BC8F8F rgb(188, 143, 143)
RoyalBlue #4169E1 rgb(65, 105, 225)
SaddleBrown #8B4513 rgb(139, 69, 19)
Salmon #FA8072 rgb(250, 128, 114)
SandyBrown #F4A460 rgb(244, 164, 96)
SeaGreen #2E8B57 rgb(46, 139, 87)
SeaShell #FFF5EE rgb(255, 245, 238)
Sienna #A0522D rgb(160, 82, 45)
Silver #C0C0C0 rgb(192, 192, 192)
SkyBlue #87CEEB rgb(135, 206, 235)
SlateBlue #6A5ACD rgb(106, 90, 205)
SlateGray #708090 rgb(112, 128, 144)
Snow #FFFAFA rgb(255, 250, 250)
SpringGreen #00FF7F rgb(0, 255, 127)
SteelBlue #4682B4 rgb(70, 130, 180)
Tan #D2B48C rgb(210, 180, 140)
Teal #008080 rgb(0, 128, 128)
Thistle #D8BFD8 rgb(216, 191, 216)
Tomato #FF6347 rgb(255, 99, 71)
Turquoise #40E0D0 rgb(64, 224, 208)
Violet #EE82EE rgb(238, 130, 238)
VioletRed #D02090 rgb(208, 32, 144)
Wheat #F5DEB3 rgb(245, 222, 179)
White #FFFFFF rgb(255, 255, 255)
WhiteSmoke #F5F5F5 rgb(245, 245, 245)
Yellow #FFFF00 rgb(255, 255, 0)
YellowGreen #9ACD32 rgb(154, 205, 50)

图床


  1. This is a footnote

  2. A footnote on "label"

  3. The definition of a footnote.

谢谢鼓励,欢迎留言反馈
0%
Title - Artist
0:00