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

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

ruisui882个月前 (05-03)技术分析21
版权声明 本文首发自微信公共帐号: 学习学习再学习(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 插件排版微信公共帐号文章” 的相关文章

使用cgroup限制进程资源

这里使用containerd项目中的cgroup包来实现进程资源限制。先写一个耗费一个CPU并且一秒增加10m内存的测试进程package mainimport ( "fmt" "math/rand" "time")func main() { go f...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

Python中的11 种数组算法

1. 创建数组 创建数组意味着留出一个连续的内存块来存储相同类型的元素。在大多数语言中,您可以在创建数组时指定数组的大小。假设您正在书架上整理一组书籍,并且您需要为正好 10 本书预留空间。功能架上的每个空间都对应于数组中的一个索引。# Example in Python arr = [1, 2,...

从 Vue2.0 到 React17——React 开发入门

作者:佚名来源:前端大全前言找工作时发现有一些公司是以React作为技术栈的,而且薪资待遇都不错,为了增加生存的筹码,所以还是得去学一下React,增加一项求生技能。因为我用Vue2.0开发项目已经四年了,故用Vue2.0开发项目的思路来学习React。前端项目是由一个个页面组成的,对于Vue来说,...

vue2中路由的使用步骤,你学会了吗?

今天我们来整理下关于vue2中路由的使用步骤:1. 导入 vue 文件和Vue-router文件(注意:vue-router是依赖vue运行的,所以一定在vue后引入vue-router)2. 定义路由组件模板3. 创建路由实例并定义路由规则4. 将路由实例挂载给Vue实例5. 在结构区域定义控制路...

基于 vue3.0 小程序拖拽定制

今天给大家分享一个使用Vue3编写的自由DIY小程序页面。mbDIY 一款基于vue3.x构建的可拖拽定制小程序模板。支持新建页面、自由拖拽模块、复制/移动、自定义模块样式等功能。整个项目分为页面、模块、控件三大部分。模块里面的组件可拖拽至主面板区,编辑后保存即可预览效果。快速安装# 克隆项目 gi...