AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

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

发布者 ruby
发布于 1446684848752  浏览 2410 关键词 工作生活 
分享到

第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页

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

$redcarpet­­render­hard_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

$apminstalllanguage­asciidocasciidoc­preview



第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://ruby­china.org/logo.png[]



第68页

.RubyChinaLogo image::images/ruby­china.png[width=300]



第69页

音频/视频

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



第70页

表格

.TableTitle |=== |NameofColumn1|NameofColumn2|NameofColumn3

|Cellincolumn1,row1 |Cellincolumn2,row1 |Cellincolumn3,row1

|Cellincolumn1,row2 |Cellincolumn2,row2 |Cellincolumn3,row2 |===



第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页

标注

:source­highlighter: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'sample­with­shout­block.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

$geminstall­­preasciidoctor­pdf $asciidoctor­pdfindex.adoc



第93页

CJK 补丁和字体

$geminstallasciidoctor­pdf­cjk­kai_gen_gothic $asciidoctor­pdf­cjk­kai_gen_gothic­install $asciidoctor­pdf­rasciidoctor­pdf­cjk­kai_gen_gothic\ ­apdf­style=THEME\ index.adoc



第94页

PROGIT2 中文版



第95页

ASCIIDOCTOR-EPUB3

$geminstall­­preasciidoctor­epub3 $asciidoctor­epub3index.adoc



第98页

MOBI

$geminstallkindlegen $asciidoctor­epub3­aebook­format=kf8index.adoc



第99页

Asciidoctor Book Template

$gitclonehttps://github.com/chloerei/asciidoctor­book­template.gitbooknam $cdbookname $bundleinstall $asciidoctor­pdf­cjk­kai_gen_gothic­install $rakebuild



第100页

ASCIIDOCTOR-REVEAL.JS



第101页

$geminstallasciidoctortiltthread_safe $geminstallslim­­version2.1.0 $gitclonegit://github.com/asciidoctor/asciidoctor­reveal.js.git

$asciidoctor­Ttemplates/slimindex.adoc



第102页

=TitleSlide

==SlideOne

*Foo *Bar *World

==SlideTwo

HelloWorld­GoodByeCruelWorld



第103页

ASCIIDOCTOR-LATEX

$geminstall­­preasciidoctor­latex

#解析文档中的latex $asciidoctor­latex­bhtmlfoo.adoc

#生成latex文档 $asciidoctor­latexfoo.adoc



第104页

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



第105页

ASCIIDOCTOR-DIAGRAM

$geminstall­­preasciidoctor­diagram



第106页

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



第107页

$asciidoctor­rasciidoctor­diagramindex.adoc



第108页

总结



第109页

Markdown AsciiDoc



第110页

Jekyll Middleman



第111页

GitBook Asciidoctor



第112页

快乐写作,快乐编程。



第113页

谢谢。 by 黄增光(@chloerei) chloerei@gmail.com



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。