写作即编程(Markdown标记语言简介及使用教程) by 黄增光

AirJD

没有录音文件

00:00/00:00

加收藏

写作即编程(Markdown标记语言简介及使用教程) by 黄增光

发布者 ruby

发布于 1446684848752 浏览 7216 关键词 工作生活

分享到

第1页

写作即编程

黄增光（@chloerei） <chloerei@gmail.com>

第2页

关于我

Web 开发者

第3页

https://ruby-china.org/rei

第4页

https://selfstore.io

第5页

写作与我相关吗？

第6页

沟通

如果你人为地将问题搞得难以阅读，它多半会被忽略，人们更愿读易懂的问

题。

How To Ask Questions The Smart Way — Eric S. Raymond

第7页

分享

杰出的程序员跟勉强过得去的程序员之间的差别，不在于它们掌握了多少种编程语言……真正的关键是，他们能不能

把他们的想法表达清楚。

— Joel Spolsky

第8页

产品文档

发布（HTML/PDF）多人协作版本管理

第9页

MARKDOWN

第10页

支持 MARKDOWN 的网站

Stack Overflow GitHub Ruby China …

第11页

example.md

#AFirstLevelHeader

##ASecondLevelHeader

Nowisthetimeforallgoodmentocometo theaidoftheircountry.Thisisjusta regularparagraph.

Thequickbrownfoxjumpedoverthelazy dog'sback.

###Header3

>Thisisablockquote. > >Thisisthesecondparagraphintheblockquote. >

第12页

$geminstallredcarpet $redcarpetexample.md>example.html

第13页

example.html

<h1>FirstLevelHeader</h1>

<h2>ASecondLevelHeader</h2>

<p>Nowisthetimeforallgoodmentocometo theaidoftheircountry.Thisisjusta regularparagraph.</p>

<p>Thequickbrownfoxjumpedoverthelazy dog';sback.</p>

<h3>Header3</h3>

<blockquote> <p>Thisisablockquote.</p>

<p>Thisisthesecondparagraphintheblockquote.</p>

第14页

require'redcarpet'

#InitializesaMarkdownparser markdown=Redcarpet::Markdown.new(renderer,extensions={})

markdown.render("Thisis*bongos*,indeed.") #=>"<p>Thisis<em>bongos</em>,indeed.</p>"

第15页

ATOM

第16页

MARKDOWN 语法

第17页

#一级标题 ##二级标题 ###三级标题 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>

标题

第18页

#####应用 #####游戏 #####页面 <h5>应用</h5> <h5>游戏</h5> <h5>页面</h5>

精通 H5

第19页

Tip 标题不等于大号加粗

第20页

Tip 空格空行都是有意义的

第21页

段落

在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。 <p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。</p> <p>这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。</p>

第22页

Tip 换行（\n）不是换行（<br>）。

第23页

这是第一行这是第二行

<p>这是第一行这是第二行</p>

这是第一行这是第二行

第24页

换行方法一：行末加两个空格。

这是第一行这是第二行

<p>这是第一行<br> 这是第二行</p>

第25页

换行方法二：修改渲染器。

$redcarpetrenderhard_wrapbreakline.md

<p>这是第一行<br> 这是第二行</p>

第26页

引用

>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。

>这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。

<blockquote> <p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。</p> <p>这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。</p> </blockquote>

第27页

代码块

deffoo puts"helloworld" end

<pre> <code> deffoo puts"helloworld" end </code> </pre>

第28页

GITHUB FLAVORED MARKDOWN (GFM)

```ruby deffoo puts"helloworld" end ```

第29页

1.有序列表 2.有序列表 3.有序列表

<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>

有序列表

第30页

*无序列表 *无序列表 *无序列表

<ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>

无序列表

第31页

文字样式

*斜体* **加粗** `代码` <em>斜体</em> <strong>加粗</strong> <code>代码</code>

第32页

链接/图片

[链接](http://example.org/) ![图片](http://example.org/image.png) <ahref="http://example.org/">链接</a> <imgsrc="http://example.org/image.png"alt="图片">

第33页

MARKDOWN 的应用场景

第34页

JEKYLL

第35页

MIDDLEMAN

第37页

GITBOOK

第38页

MARKDOWN 的局限

第39页

功能少

缺少表格、脚注、目录、拆分文件……

第40页

太多方言

GitHub Flavor、Stack Overflow Flavor……

第41页

不一致

#Hellothere

Thisisaparagraph.

one two three four

1.pirate 2.ninja 3.zombie

http://johnmacfarlane.net/babelmark2/

第42页

http://commonmark.org/

第43页

又一个方言

第44页

我们需要更好的标记语言。

第45页

简单和强大冲突吗？

第46页

ASCIIDOC

第47页

AsciiDoc 发布于 2002-11-25。 Markdown 发布于 2004-3-19。

第48页

AsciiDoc → DocBook

第49页

example.adoc

=Hello,AsciiDoc! DocWriter<doc@example.com>

Anintroductiontohttp://asciidoc.org[AsciiDoc].

==FirstSection

*item1 *item2

[source,ruby] puts"Hello,World!"

第50页

ASCIIDOCTOR

$geminstallasciidoctor $asciidoctorexample.adoc

第52页

require'asciidoctor'

content='_Zen_intheartofwritinghttp://asciidoctor.org[AsciiDoc].' Asciidoctor.convertcontent #=>"<divclass=\"paragraph\">\n<p><em>Zen</em>intheartofwriting<ahre

第53页

ATOM

$apminstalllanguageasciidocasciidocpreview

第55页

jekyll-asciidoc middleman-asciidoc GitBook v2+

第56页

ASCIIDOC 语法

第57页

文档标题和属性

=文档标题作者<author@example.org> :appversion:1.0.0

第58页

=文档标题 ==一级标题 ===二级标题 ====三级标题

章节标题

第59页

=文档标题 :toc: ==第一章 ===第一节 ===第二节 ==第二章 ==第三章

第61页

段落

在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。

第62页

第一行+ 第二行

换行方法一：行末加 ` +`

第63页

[%hardbreaks] 第一行第二行

换行方法二：段落属性

第64页

=文档标题 :hardbreaks:

第一行第二行

换行方法三：全局属性

第65页

引用

____ 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 ____

[quote,鲁迅] ____ 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 ____

[quote,鲁迅,《秋夜》] ____ 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 ____

第67页

图片

image::path/to/image.png[] image::https://rubychina.org/logo.png[]

第68页

.RubyChinaLogo image::images/rubychina.png[width=300]

第69页

音频/视频

audio::path/to/audio.ogg[] video::path/to/video.ogg[]

第70页

第72页

[format="csv",options="header"] |=== Artist,Track,Genre Baauer,HarlemShake,HipHop TheLumineers,HoHey,FolkRock |===

第73页

[format="csv",options="header"] |=== include::customers.csv[] |===

第74页

[source,ruby] require'sinatra'

get'/hi'do "HelloWorld!" end

代码块

第75页

标注

:sourcehighlighter:coderay :icons:font

.hello_world.rb [source,ruby] require'sinatra'#<1>

get'/hi'do#<2> "HelloWorld!"#<3> end <1>Libraryimport <2>URLmapping <3>Contentforresponse

第77页

脚注

*原汁海螺28元 *原汁扇贝10元 *海捕大虾38元footnote:[以上海鲜按个计价]

第78页

警告

:fonts:icon TIP:Protip... IMPORTANT:Don'tforget... WARNING:Watchoutfor... CAUTION:Ensurethat...

第80页

INCLUDE

index.adoc

=DocumentTitle

include::sections/chapter_1.adoc[]

include::sections/chapter_2.adoc[]

include::sections/chapter_3.adoc[]

. |index.adoc `sections |chapter_1.adoc |chapter_2.adoc `chapter_3.adoc

第81页

BLOCK

.Title [Blockname,Attributes] Content

第82页

自定义 BLOCK

[shout] Thetimeisnow.Getamoveon.

第83页

require'asciidoctor' require'asciidoctor/extensions'

classShoutBlock<Asciidoctor::Extensions::BlockProcessor PeriodRx=/\.(?=|$)/

use_dsl

named:shout on_context:paragraph name_positional_attributes'vol' parse_content_as:simple

defprocessparent,reader,attrs volume=((attrs.delete'vol')||1).to_i create_paragraphparent,(reader.lines.map{|l|l.upcase.gsubPeriodRx end

第84页

Asciidoctor::Extensions.registerdo blockShoutBlock end

Asciidoctor.convert_file'samplewithshoutblock.adoc'

第85页

更多……

http://asciidoctor.org/docs/asciidoc-writers-guide/ http://asciidoctor.org/docs/user-manual/

第86页

ASCIIDOCTOR

第87页

跨平台

Asciidoctor AsciidoctorJ (via JRuby) Asciidoctor.js (via Opal)

第88页

1→N

HTML PDF EPUB Reveal.js LaTex Diagram

第89页

ASCIIDOCTOR (HTML)

$asciidoctorindex.adoc

第90页

THEMES

http://themes.asciidoctor.org/

第91页

ASCIIDOCTOR-PDF

$geminstallpreasciidoctorpdf $asciidoctorpdfindex.adoc

第93页

CJK 补丁和字体

$geminstallasciidoctorpdfcjkkai_gen_gothic $asciidoctorpdfcjkkai_gen_gothicinstall $asciidoctorpdfrasciidoctorpdfcjkkai_gen_gothic\ apdfstyle=THEME\ index.adoc

第94页

PROGIT2 中文版

第95页

ASCIIDOCTOR-EPUB3

$geminstallpreasciidoctorepub3 $asciidoctorepub3index.adoc

第98页

MOBI

$geminstallkindlegen $asciidoctorepub3aebookformat=kf8index.adoc

第99页

Asciidoctor Book Template

$gitclonehttps://github.com/chloerei/asciidoctorbooktemplate.gitbooknam $cdbookname $bundleinstall $asciidoctorpdfcjkkai_gen_gothicinstall $rakebuild

第100页

ASCIIDOCTOR-REVEAL.JS

第101页

$geminstallasciidoctortiltthread_safe $geminstallslimversion2.1.0 $gitclonegit://github.com/asciidoctor/asciidoctorreveal.js.git

$asciidoctorTtemplates/slimindex.adoc

第102页

=TitleSlide

==SlideOne

*Foo *Bar *World

==SlideTwo

HelloWorldGoodByeCruelWorld

第103页

ASCIIDOCTOR-LATEX

$geminstallpreasciidoctorlatex

#解析文档中的latex $asciidoctorlatexbhtmlfoo.adoc

#生成latex文档 $asciidoctorlatexfoo.adoc

第104页

\[ e^{2\pi\sqrt{1}}=1 \]

第105页

ASCIIDOCTOR-DIAGRAM

$geminstallpreasciidoctordiagram

第106页

[ditaa] .... ++ |Asciidoctor|+ |diagram|| ++|PNGout ^| |ditaain| |v +++++/\ ||+Asciidoctor+>|| |Text|++|Beautiful| |Document||!magic!||Output| |{d}||||| +++++\/ :^ |Lotsofwork|

第107页

$asciidoctorrasciidoctordiagramindex.adoc

第108页

总结

第109页

Markdown AsciiDoc

第110页

Jekyll Middleman

第111页

GitBook Asciidoctor

第112页

快乐写作，快乐编程。

第113页

谢谢。 by 黄增光（@chloerei） chloerei@gmail.com