html邮箱代码怎么写_是什么让我开始在手机上写 markdown

最新推荐文章于 2024-05-28 02:00:00 发布

weixin_39568172

最新推荐文章于 2024-05-28 02:00:00 发布

阅读量260

点赞数

文章标签： html邮箱代码怎么写手机js编辑器中文版

有了这个软件，我就能在手机上写公众号，写博客了！！！

事情还得从一只蝙蝠说起… 但咱们今天的主题不是蝙蝠。

前言

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

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

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

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

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

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

直到前阵子，我发现了一款宝藏 App：markdown

没错，它就叫 markdown，惊不惊喜？下面是它的简介：

为什么我选择了它？

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

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

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

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

幻想骚操作

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

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

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

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

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

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

设想能实现吗？

能！

但是有 bug 。

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

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

`~`

、

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

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

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

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

第一套

第二套

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

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

或者要不支持一下公式？这样才够 markdown！

但是平时没接触过这些，怎么实现呢？

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

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

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

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

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

公式：

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

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

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

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

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

于是我又利用 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 浏览器打开)：