当前位置:首页 > 技术分析 > 正文内容

用 Markdown Here 插件排版微信公共帐号文章

ruisui8815小时前技术分析3
版权声明 本文首发自微信公共帐号: 学习学习再学习(xiaolai-xuexi); 无需授权即可转载,甚至无需保留以上版权声明; 转载时请务必注明作者。

注意

以下是一个“烂教程”的示例。烂教程的特点就是作者懒得写清楚,或者干脆不知道应该如何写清楚,不知道把什么写清楚,不知道写给谁,当然也不知道读者究竟在哪里需要什么样的帮助…… 于是写出来的东西,除了给自己带来一点存在感之外,对别人实在是用处不大……

1. 烂教程

有时候,脑子是短路的。写微信公共帐号都快一年了,也没想到过应该搜搜看看有没有什么浏览器插件可以用来转化 Markdown 格式。要不是在新生大学的学习圈里看到有人提起,那就可能一直想不到。真是没办法。

这个插件是 Markdown Here, 不仅支持FirefoxGoogle Chrome,也支持Safari

它能把浏览器中的文本编辑器里的 Markdown 格式的文本转换成格式化之后的 html,并可以预先定制 css 样式。

关于 Markdown 编辑器,我买过好几个,各种免费的也比较了好多,最终发现只要是专门的 Markdown 编辑器就都不够好用…… 现在我用 Atom 编辑器,加上几个与 Markdown 相关的插件:

  • markdown-writer
  • markdown-toc
  • markdown-scroll-sync
  • markdown-pdf
  • markdown-preview(编辑器内建插件)

我测试后的结果是,微信公共帐号的文字编辑器,其实不解析 h1…h6 的,它会统一把这些 Heading 搞成 strong…… 这个比较讨厌,所以,只能暂时对付着用,于是,我只好在 Markdown Here 的 Option 里定义了一个big,用来替代小标题。

.markdown-here-wrapper { font-size: 17px; line-height: 30px;}pre, code { font-size: 14px; font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;}code { margin: 0 3px; padding: 0 6px; white-space: pre-wrap; background-color: #F8F8F8; border-radius: 2px; display: inline;}pre { font-size: 15px; line-height: 20px;}pre code { white-space: pre; overflow: auto; border-radius: 3px; padding: 5px 10px; display: block !important;}strong, b{ color: #BF360C;}em, i { color: #009688;}big { font-size: 22px; color: #009688; font-weight: bold; vertical-align: middle; border-bottom: 1px solid #eee;}small { font-size: 12px; line-height: 22px;}hr { border-bottom: 0.05em dotted #eee; margin: 10px auto;}p { margin: 15px 5px !important;}table, pre, dl, blockquote, q, ul, ol { margin: 10px 5px;}ul, ol { padding-left: 10px;}li { margin: 5px;}li p { margin: 5px 0 !important;}ul ul, ul ol, ol ul, ol ol { margin: 0; padding-left: 10px;}ol ol, ul ol { list-style-type: lower-roman;}ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha;}dl { padding: 0;}dl dt { font-size: 1em; font-weight: bold; font-style: italic;}dl dd { margin: 0 0 10px; padding: 0 10px;}blockquote, q { border-left: 3px solid #009688; padding: 0 10px; color: #777; quotes: none;}blockquote::before, blockquote::after, q::before, q::after { content: none;}h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; color: #009688;}h1 { font-size: 24px; border-bottom: 1px solid #ddd;}h2 { font-size: 22px; border-bottom: 1px solid #eee;}h3 { font-size: 20px;}h4 { font-size: 18px;}h5 { font-size: 16px;}h6 { font-size: 16px; color: #777;}table { padding: 0; border-collapse: collapse; border-spacing: 0; font-size: 1em; font: inherit; border: 0;}tbody { margin: 0; padding: 0; border: 0;}table tr { border: 0; border-top: 1px solid #CCC; background-color: white; margin: 0; padding: 0;}table tr:nth-child(2n) { background-color: #F8F8F8;}table tr th, table tr td { font-size: 16px; border: 1px solid #CCC; margin: 0; padding: 5px 10px;}table tr th { font-weight: bold; background-color: #F0F0F0;}

2. 烂教程也会有人感谢……

因为毕竟提供了一点有用的信息,所以,若是传播足够广,总是会有一些人有收获,然后礼貌地致谢。可从另外一个角度来看,这种礼貌反过来又会让烂教程的作者以为自己这样就可以了…… 许多年之后都不知道应该在什么地方后悔。

3. 好教程是什么样的?

好教程的作者,知道自己写给谁看,知道读者需要的是什么,知道读者哪里搞不清楚,知道读者在哪里会遇到困难,知道读者读过之后会有什么样的反馈…… 这其实很难的 —— 要反复实验、反复实践才能做好。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3775.html

分享给朋友:

“用 Markdown Here 插件排版微信公共帐号文章” 的相关文章

宽带客户收费管理系统--维修版

宽带客户收费管理系统--维修版headerfooter《宽带客户收费管理系统——维修版》是一款适合宽带运营商使用的管理系统。软件主要包括以下功能:1.主要功能包括用户开户、收费录入、工单登记、故障处理;2.自定义套餐及收费功能;3.强大的查询功能和数据备份功能以及严密的用户权限功能;4.界面设计简洁...

学会使用Vue JSX,一车老干妈都是你的

作者:子君转发链接:https://mp.weixin.qq.com/s/eAOivpHeowLShfwPfW8-BA?君自前端来,应知前端事。需求时时变,bug改不完。?连续几篇文章,每篇都有女神,被老铁给吐槽了,今天不提了女神了,反正女神都是别人的(扎心了)。这两天小编看了腾讯与老干妈的事情,晚...

美国民众负债累累 但今年假期消费者支出仍将创下新高

智通财经APP获悉,在迎接假期之际,许多美国人已经背负了创纪录的信用卡债务。然而,今年假期消费者支出仍将创下新高。根据美国零售联合会(NRF)上周发布的报告,预计今年11月1日至12月31日期间的消费总额将达到创纪录的9795亿至9890亿美元之间。NRF首席经济学家Jack Kleinhenz表示...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

有效地简化导航-Part 1:信息架构

「四步走」——理想的导航系统要做一个可用的导航系统,网页设计师必须按顺序回答以下4个问题:1. 如何组织内容?2. 如何解释导航的选项?3. 哪种导航菜单最适合容纳这些选项?4. 如何设计导航菜单?前两个问题关注构建和便签内容,通常称为信息架构。信息架构师通常用网站地图(site map diagr...

22《Vue 入门教程》VueRouter 路由嵌套

1. 前言本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见,如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。2. 配置嵌套路由实际项目中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层...