用Markdown写博客

故事扮演 提交于 2019-12-18 20:48:02

一、动机

引用 Markdown 文档(原版 | 中文版)中的描述:

Markdown 的目标是:实现「易读易写」,成为一种适用于网络的书写语言。

一份使用 Markdown 格式撰写的文档应该可以直接以纯文本方式发布,而不会看起来满是标签或格式指令。

我们通常使用博客系统的 WYSIWYG 编辑器来写博客。与这种传统方式相比,我认为用 Markdown 写博客至少有以下好处:

  • 越文本越简单,所想即所得

    撰写 Markdown 文档就是在写纯文本文档,非常简单快捷;一旦熟悉了 Markdown 语法(非常容易),文档格式尽在掌握,所想即所得。

    可以试想下用 Vi/Vim 在键盘上弹奏文本,和在 WYSIWYG 编辑器的格式栏中狂点一通的场景。

  • 保持文档内容的独立性

    虽然相比 HTML 更轻量级,但 Markdown 也是一门通用的标记语言,用 Markdown 撰写的文档(以及由Markdown文档转换生成的 HTML 文档)是稳定的,Markdown 解释器保证了文档内容的独立性。

    而如果用 WYSIWYG 编辑器撰写文档,在不同的博客系统上面,为了表达同样的内容,最终得到的 HTML 文档则可能千差万别。

  • 本地撰写,随处发布

    用 Markdown 撰写文档只需要一个编辑器,因此可以在本地撰写,然后发布到你喜欢的一个或多个博客系统中去。本地撰写既方便快捷,又能够实现本地备份。这样一来,你其实就是在本地写随想、记笔记,发布博客只是一个简单的附加操作,甚至你也可以不发布。

当然凡事有利必有弊,用 Markdown 写博客的缺点也是明显的:

  • 不是所有博客都支持 Markdown

    如果博客系统不支持 Markdown,但是支持发布 HTML 文档,那可以先手工将 Markdown 文档转换成 HTML 文档,然后再发布到博客中。

  • 上传图片是个问题

    网上的有一个方法是:先上传图片到博客系统,得到图片 URL 后,再添加到 Markdown 文档中。这相比在 WYSIWYG 编辑器中直接上传麻烦很多,而且不同博客系统中如何单独上传图片还是个问题。(期待有更可行更通用的解决办法)

  • CSS 样式差异

    对于相同的 HTML 元素而言,不同的博客系统有不同的 CSS 样式,由此呈现出来的效果可能会不同。当然这个问题可以通过自己定制 CSS 样式来改善。

二、步骤

1. 撰写

这个其实没什么好说的,打开你喜欢的文本编辑器,按照Markdown语法撰写内容即可。

如果你对Markdown语法还没有烂熟于心,或者想边写边看文档的最终效果,也可以使用Markdown编辑器。这里推荐一款在线 Markdown 编辑器(基于Showdown.js),其他的没试过,这款用起来还是很方便的。

2. 发布

如果博客系统支持 Markdown,这一步也没什么好说的,直接复制/粘贴/发布三步走。

如果博客系统不支持 Markdown,但支持发布HTML文档,就需要先将 Markdown 文档转换为 HTML 文档后再发布。转换方法视情况而定:

  • 如果使用本地文本编辑器,则可以通过命令或脚本进行转换(这里给出一个简单的 Python 脚本:markdown2html.py)

    #! /usr/bin/python
    import markdown
    import sys
    if len(sys.argv) != 3:
        print 'usage: python markdown2html.py [markdown_filename] [html_filename]'
    try:
        markdown.markdownFromFile(input=sys.argv[1], output=sys.argv[2])
        print 'succeeded'  
    except Exception, e:
        print 'failed'
    
  • 如果使用在线 Markdown 编辑器,则在左侧写好Markdown文档后,在右上角的下拉框中选择 HTML Output 即可得到对应的 HTML 文档。

三、示例

博客园好像不支持 Markdown,本篇文章的发布方法:

  1. 在 Vim 中撰写"用Markdown写博客.txt"
  2. 使用 python markdown2html.py 用Markdown写博客.txt blog.html 转换生成 HTML 文档
  3. 进入 设置默认编辑器,选择 纯文本框
  4. 在博客园后台的纯文本框中输入 <div id="markdown"></div>,并将 blog.html 的内容复制到 div#markdown 块元素内部,然后提交
  5. 进入 设置,在 通过CSS代码定制代码页面风格 中定制 div#markdown 块元素内部的各 HTML 元素的CSS 样式
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!