前言

markdown 虽然不是一门编程语言,但它却很大程度上提高了我们的效率。

关于它的优点,我想借用少数派的一段话来描述:

•专注你的文字内容而不是排版样式,安心写作。•轻松的导出 html、pdf 和本身的.md 文件。•纯文本内容,兼容所有的文本编辑器与字处理软件。•随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。•可读、直观、学习成本低。

现在市面上的 markdown 编辑器很多,诸如 pc 端我一直在用的 typora 就相当优秀而且是「开源」的。

但到了移动设备上就不一样了。

在 ios 设备上确实有些 markdown 的 App 设计得还不错,但是大多数都采用了订阅制收费,对于学生党来说每月的费用还算是一笔不小的开销。

直到前阵子,我发现了一款宝藏 App:markdown

没错,它就叫 markdown,惊不惊喜?下面是它的简介:

html5 手机写法 在手机上写html_html邮箱代码怎么写

为什么我选择了它?

1、功能齐全,你可以看看简介,我就不一一赘述了,像极了移动版的 typora(问题是 typora 没有移动端呀)。

2、价格合适,虽然 AppStore 里写的软件是订阅制收费。但是!!!我下载完后发现 App 内其实是可以 68 元购买终身版的,相当于某些 App 订阅三个月的价格,想想瞬间觉得不亏。(当然你也可以试用体验一下再决定)

3、我最喜欢的功能,支持自定义样式,你只需要自己写一个 css,通过外链就能引入了。同时开发者也表示接下来也会把样式文件改为可修改的,这意味着你可以直接在 App 内修改 css 来自定义自己喜欢的主题了。这很 mdnice!

html5 手机写法 在手机上写html_html邮箱代码怎么写_02

我并不想把整篇文章变成 App 的使用说明,所以如果你感兴趣,不妨自己去下载来体验一下!

幻想骚操作

既然能导出各种格式,并且能和电脑互相传输文件,这是不是像是在我手机上装了一个用 Markdown 写作的 blog 客户端?

html5 手机写法 在手机上写html_手机js编辑器中文版_03

设想一下,在公交、地铁上,在伸手不见五指的黑夜。

灵感突然来了,我想写点东西,可是电脑不在身边。

此时,我拿出 iPhone 或者 iPad,打开 markdown,选择我喜欢的主题,写好了一篇文章,满意地点点头。

html5 手机写法 在手机上写html_html邮箱代码怎么写_04

回到家,把写好的文章的 md 和 html 分别导出到电脑上,通过 mdnice,不到 5 分钟,我向公众号推送了一篇文章。

然后在 html 中,引入自定义的 css 样式,发布到自己的博客上,不到 5 分钟。十分钟的时间,我干完了一两个小时或者更长时间的工作,今天又能多睡两个小时了。(晚睡是不可能的,我还要打开 bilibili…)

设想能实现吗?

能!

但是有 bug 。

我发现 markdown 导出的 html 是没有嵌入样式的,尽管 header 中的写了一些外链样式,但是导出时样式表路径是使用的相对路径,而样式文件并没有随 html 一同导出。

我先是查看了一下源代码,我发现 html 中使用的仅仅是一些普通的标签,诸如

~









之类的常见标签,也没有 class 名,也就是说这就是一个没有样式的 html 文件。


除了中引入了highlight.jsMathJax.js,虽然我还不知道这两个文件是干什么的,但从命名来看,应该和「高亮」和「数学」相关。

没来得及多想,所以为什么不写一套自己的样式文件呢,放到博客上多有个性。

于是我用了一个下午的时间写了两套自己喜欢的样式,其中一套的灵感来自于 yige.App[1]

第一套

html5 手机写法 在手机上写html_html邮箱代码怎么写_05

第二套

html5 手机写法 在手机上写html_html_06

现在普通的文章可以使用这套样式了,但是代码还没有高亮显示。

作为一个常常与代码打交道的人,博客怎么能没有好看的高亮代码块呢?

或者要不支持一下公式?这样才够 markdown!

但是平时没接触过这些,怎么实现呢?

我把 ipa 安装包解压,大致看了一下 style 中的文件目录,我猜测应该和这些东西有关。

html5 手机写法 在手机上写html_html_07

我去官网看了一下这部分库的用法,大致懂了点什么。

然后,我又看了一下 markdown 中代码高亮实现的原理,似乎也十分简单,就是引入了代码高亮的 js 库,然后调用一下就行了。

试了一下,确实成功了,但是样式并不好看,我想起了 vs code 中的 atom-one-dark 主题配色挺漂亮,干脆搞一个?

然后通过一翻瞎折腾,一个 Mac 风格的代码高亮成功了:

html5 手机写法 在手机上写html_手机js编辑器中文版_08

公式:

html5 手机写法 在手机上写html_html5 手机写法_09

是不是感觉还是缺了点什么?

html5 手机写法 在手机上写html_手机js编辑器中文版_10

如果有个阅读进度条会不会好一些,恰巧前阵子看过一篇文章,于是通过 css,我又给文章加了个阅读进度条。

现在,在阅读的时候,文章上方会出现一个紫色的进度条:

紫色部分代表已经阅读过的进度,白色的部分表示待阅读的进度。

html5 手机写法 在手机上写html_html_11

突然我想起了现在手机上有了深色模式。

于是我又利用 css 的媒体查询@media (prefers-color-scheme: dark)适配了暗黑模式,现在浏览文章时也能根据手机的深(浅)色模式自动变换颜色了。

当然,可能还有许多没有完善的地方,等以后遇到了情况再进行补充吧!

既然 markdown 能用,那就是说明只要是一个 html(without style)的都能用,所以我尝试用 typora 导出一些文章的 html 文件,并在header中引入我的 css 和 js 文件,然后放到服务器上。

ok,完成!

大致文件结构如下:

<link rel="stylesheet" href="../style/html-style/markdown.css"><link rel="stylesheet" href="../style/highlight-style/atom-one-dark.css"><script src="../style/highlightjs/highlight.min.js">script><script>hljs.initHighlightingOnLoad();script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">script>

em~不知道写啥了,就这样吧……

你可以打开下面的网址看看我发布的几篇文章的 demo(推荐 Chrome 浏览器打开):

html5 手机写法 在手机上写html_html_12

最后的话

在手机上写作效率肯定不能和电脑相提并论,但我觉得,利用业余时间记录一点东西还是蛮有意义的一件事。