无意中发现Markdown,最终解放了我
文件夹
正文
概述
大部分情况下,Markdown的基本的语法已够我们使用,比方随性记录点东西、非专业的分析文章等。一般仅仅用到标题、区块引用、强调、列表这种基本元素。但若要写专业性比較强的分析文章或技术性文章,这些基本的语法就不够用了。由于我们常常会用到表格、脚注、想要自己主动生成文章文件夹等,若是涉及代码的技术文章。我们还希望代码支持高亮以提升阅读体验。
这就须要用到Markdown的扩展语法了。
CSDN-markdown编辑器支持基于PageDown( Stack Overflow所使用的编辑器)的扩展。从而支持GFM(GitHub Flavored Markdown)的Markdown Extra语法。
以下具体介绍这些可使用的扩展语法。
换行
在标准Markdown语法中,要想换行必须在一行的最后加两个空格才行。否则即使你在一行的末尾插入硬回车。这些文本仍然会被合并为一行,这个特性会导致大量非预期的格式化错误。
可是GFM则没有此要求。
GFM会把段落内容中的换行视为真正的换行,而这非常可能正是你所期望的。
以下这个段落被一个换行符分隔成了两行:
Roses are red
Violets are blue
将被渲染为:
Roses are red
Violets are blue
删除线
GFM也支持删除线的使用,仅仅要用~~
将须要删除的文本包围起来就可以。
样例:
~~Mistaken text.~~
转为HTML后为:
<p><del>Mistaken text.</del></p>
效果:
Mistaken text.
链接自己主动识别
在前面文章「CSDN-markdown基本的语法说明—自己主动链接」中讲到,对于网址和Email的自己主动链接须要用一对尖括号括起来才干识别。
而在GFM中,对于标准的URL须要加链接,仅仅需简单地输入这个URL就能够。它将被自己主动转换为一个链接。
样例:
http://blog.csdn.net/lanxuezaipiao/
效果:
http://blog.csdn.net/lanxuezaipiao/
但对于Email地址,在CSDN-markdown编辑器里还不支持自己主动识别,仍须要加尖括号。
表格
一般的表格包括表头(可选)和单元格,Markdown Extra使用竖线和切割线标记表格。
语法说明:
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
第一行包括可选的表头,第二行包括位于表头和单元格内容之间的强制性分隔线。接下来的每一行就是单元格的内容,列与列之间用竖线 |
分隔。
假设愿意的话。能够在表格每一行的开头和结尾处加入竖线 |
。例如以下所看到的得到的结果和上面一致:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
注意事项:
表格的每一行至少有一个竖线
|
,否则无法正确处理表格。这也就意味着。创建仅仅有一列的表格。必须在每一行的开头或者结尾处加入一个竖线|
,或者都加入。
样例:
项目 | 价格
-------- | ---
Computer | $1600
Phone | $12
Pipe | $1
转为HTML后为:
<table>
<tr>
<th>项目</th>
<th>价格</th>
</tr>
<tr>
<td>Computer </td>
<td>$1600</td>
</tr>
<tr>
<td>Phone</td>
<td>$12</td>
</tr>
<tr>
<td>Pipe</td>
<td>$1</td>
</tr>
</table>
效果:
项目 | 价格 |
---|---|
Computer | $1600 |
Phone | $12 |
Pipe | $1 |
问题:怎样设置表格对齐方式
看到这里可能有人会问:怎么都是左对齐?能不能设置为居中对齐呢?
在Markdown Extra中。须要在相应列的分隔线左右加入冒号:
来指定列的对齐方式。
- 冒号
:
在分隔线的左边说明此列左对齐(默认方式) - 冒号
:
在分隔线的右边说明此列右对齐 - 在分隔线的左右两边都有冒号
:
说明此列居中。
比方以下的 项目列是左对齐。价格列是右对齐,而数量列是居中对齐的:
| 项目 | 价格 | 数量 |
| :-------- | --------:| :--: |
| Computer | 1600 元 | 5 |
| Phone | 12 元 | 12 |
| Pipe | 1 元 | 234 |
效果为:
项目 | 价格 | 数量 |
---|---|---|
Computer | 1600 元 | 5 |
Phone | 12 元 | 12 |
Pipe | 1 元 | 234 |
当然对于单元格里的内容,你也能够使用各种Markdown语法,比方加粗、删除线什么的。
代码块高亮
前面在文章「CSDN-markdown基本的语法说明」里已经介绍了能够通过缩进四个空格或一个制表符来将文本转换为代码块,但这种方式有两个缺点:
代码块的每一行都须要缩进。还好CSDN-markdown编辑器支持全选代码块然后按Tab键实现一起缩进效果,可是也有非常多MD编辑器是不能这样一起缩进的,那么你就须要手动的一行一行缩进,代码长的话这将是一个费时费力且无聊的工作。
不支持代码高亮功能,这对程序猿来说是非常不好的体验。
幸好,CSDN-markdown编辑器经过PageDown扩展后。支持GFM的代码块高亮功能。仅仅要把代码块包裹在 ```
之间。你就不须要通过无休止的缩进来标记代码块了。
语法说明:
使用```
(三个反引號)包围代码块就可以。里面的代码块不须要不论什么缩进。这种方式也称“围栏式代码块”,例如以下:
```
代码块
```
样例:
```
printf("Hello World!");
```
转为HTML后为:
<pre>
<code>printf("Hello World!");</code>
</pre>
效果:
printf("Hello World!")
注意上面是默认的代码块着色效果。GFM还有更进一步的措施,你能够指定一个可选的编程语言标识符(比方c++、Java、Python等),然后就能够启用指定语言的语法着色了。
样例:
以下以一段 Ruby 代码着色为例:
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
转为HTML后为:
<pre class="prettyprint">
<code class="language-ruby">
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
</code>
</pre>
效果:
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
我们使用 Linguist 来进行语言识别和语法着色。你能够在 语言 YAML 文件 中查证哪些语言标识符是有效的。
定义列表
有时候我们在写文档时须要对某些列表项进行说明性定义,在html中我们能够使用<dt>
、<dd>
这种标签来实现,Markdown Extra中更加简洁,仅仅需使用冒号就能够解决。
语法说明:
列表中的项目
: 项目的定义部分
即使用“冒号:
+ 一个以上的空格 + 项目的定义部分”来定义一个项目的定义内容。
样例:
项目1
项目2
: 定义 A
: 定义 B
项目3
: 这个定义有一个代码块
代码块
项目4
: 这个定义有一个引用块
> 定义D内容
转为HTML后为:
<dl>
<dt>项目1</dt>
<dt>项目2</dt>
<dd>
定义A
</dd>
<dd>
定义B
</dd>
<dt>项目3</dt>
<dd>
这个定义有一个代码块
<pre><code>代码块</code></pre>
</dd>
<dt>项目4</dt>
<dd>
这个定义有一个引用块
<pre><code>定义D内容</code></pre>
</dd>
</dl>
效果:
- 项目1
- 项目2
- 定义 A
- 定义 B
- 项目3
-
这个定义有一个代码块
代码块
- 项目4
-
这个定义有一个引用块
定义D内容
注意事项:
定义的内容能够包括行级(如行内代码)和块级(如区块引用、代码块)的Markdown语法。
脚注
脚注用于为正文中的某个条目加入补充凝视,说明该条目的引文出处。跟參考文献一样,脚注一般位于文档的末尾。文章内以数字标注。
在Markdown Extra也能够非常easy的实现脚注。
语法说明:
在须要标记脚注文字的后面加入一个方括号。方括号里的内容必须以^
开头。再接着是数字或字符串标记:
脚注[ ^1]有一个标签[^label]和该标签的定义[^!DEF].
接着,在文件的随意地方,你能够把这个脚注的内容定义出来:
[ ^1]: 这是一个脚注
[^label]: 这是脚注的标签
[^!DEF]: 这是脚注标签的定义
脚注内容定义的形式:
- 前面引用脚注的标签符号
- 接着一个冒号
- 再接着一个以上的空格或制表符
- 最后是脚注定义的内容。
脚注定义的内容能够包括多行、代码区块、区块引用和大多数其它markdown格式的内容。
样例:
这是一个脚注[ ^footnote].
[ ^footnote]: 脚注定义内容的第一行内容.
定义内容的第二行.
> 一个包括多行的
> 区块引用.
转为HTML后为:
<p>这是一个脚注<a href="#fn:footnote" id="fnref:footnote" title="See footnote" class="footnote">1</a>.</p>
<div class="footnotes">
<hr>
<ol>
<li id="fn:footnote">脚注定义内容的第一行内容. <br />
定义内容的第二行.
<blockquote> 一个包括多行的 <br />
> 区块引用.
</blockquote>
<a href="#fnref:footnote" title="Return to article" class="reversefootnote">↩</a></li>
</ol>
</div>
效果:
这是一个脚注1.
默认情况下。脚注内容位于生成的 HTML 文档末尾,上面的脚注内容在该文章的末尾能够看到。
自己主动生成文件夹
在须要文件夹出现的地方(一般在文章一開始)放置一个标记。这样会自己主动生成一个嵌套的包括全部标题的列表。
默认的标记是[TOC]
。
样例:
[TOC]
# 概述
## 定义
## 用处
# 结论
最前面的那个文件夹就是用 [TOC]
生成的。
參考资料
- 脚注定义内容的第一行内容.
定义内容的第二行.一个包括多行的
区块引用.
无意中发现Markdown,最终解放了我的更多相关文章
- 无意中发现destoon5商城处理订单时的一些bug
最新的destoon5在商城的商品中加入了商品属性的功能,可以使用三个商品属性 而在代码中用如“49-3-0-0”来标记所选择的的商品及属性,其中第一个数字是商品的id,后三个表示的是商品对应的属性值 ...
- 关于VOID *在cl与gcc的不同(无意中发现)
在windows中,void *是不确定类型,CL编译器无法确定其步长 但在linux中,void *默认步长是1
- python无意中发现的
http://www.zhihu.com/question/37904398?sort=created&page=2 >>> a = [[1,2],[3,4],[5,6,7] ...
- 今天无意中发现的WWW.threadPriority
WWW.threadPriority Description Priority of AssetBundle decompression thread. You can control dec ...
- iOS开发中的Markdown渲染
iOS开发中的Markdown渲染 BearyChat的消息是全面支持Markdown语法的,所以在开发BearyChat的iOS客户端的时候需要处理Markdown的渲染. 主要是两套实现方案: 直 ...
- 谷歌高管无意中透露Google Glass未获得成功的原因
Google X高管Astro Teller在接受媒体采访时无意中透露了这款设备没有取得预期成绩的原因 最终我们发现,在他们生活的世界里,数字生活和即时物理生活根本无法融为一体. Teller提出的这 ...
- 在前端页面中使用Markdown并且优化a标签
近期在自己的项目中加入了对 Markdown 语法 的支持,主要用到的是markedjs这个项目.该项目托管在github上,地址为:https://github.com/markedjs/marke ...
- 在html中嵌入markdown
在博客园网页里写markdown的时候, 某些特殊内容想加上自定义的css, 于是用<div class="xxx">包裹起来, 但是发现该<div>中的m ...
- vscode中使用markdown
vscode中使用markdown vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用也非常简单,所以深受广大程序员的喜爱. markdown 是一 ...
随机推荐
- Java-Spring-WebService最基础的配置示例
很早很早之前,就初步学习了WebService,感觉还是比较"好"的. 使用Web服务,感觉就像普通API一样,和HTTP接口比较起来. WebService有个很大的局限,就 ...
- Android中级第十讲--相机录像和查看系统相册图片
博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 录像比较简单,开始录制: myCamera.unlock(); ...
- inflater-布局转化实现
通俗的说,inflate就相当于将一个xml中定义的布局找出来.因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组件 ...
- select发生改变使用js提交form表单(get传值)
form表单如下: <form id="my_form" method="get" action=""> <input t ...
- js引入广告服务
var header = []; header[1] = { 'title' : '新浪开始进军微博大战', 'pic' : 'images/header1.png', 'link' : 'http: ...
- Objective-C基础笔记(1)基本概念和第一个程序
一.基本概念 Objective-C(简称OC)是iOS开发的核心语言,苹果公司在维护,在开发过程中也会配合着使用C语言.C++,OC主要负责UI界面,C语言.C++可用于图形处理.C语言是面向过程的 ...
- FineUI 页面跳转
要加 EnableAjax=false; <f:Button ID="btn1" EnableAjax="false" OnClick="btn ...
- Java Base64、HMAC、SHA1、MD5、AES DES 3DES加密算法
● BASE64 严格地说,属于编码格式,而非加密算法 ● MD5(Message Digest algorithm 5,信息摘要算法) ● SHA(Secure Hash Algo ...
- Vue Cli 打包之后静态资源路径不对的解决方法
cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...
- Vue路由query传参
1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...