我是这么用 高效写作、排版工具,解决微信排版没有滚动条的问题

我是这么用 高效写作、排版工具,解决微信排版没有滚动条的问题

  • 如果评论区没有及时回复,欢迎来公众号:ByteCode 咨询
  • 公众号:ByteCode。致力于分享最新技术原创文章,涉及 Kotlin、Jetpack、算法、译文、系统源码相关的文章

在文章开始之前,分享一下目前我在写作工程中都会用到的工具:

  • Obsidian 主要用于梳理知识框架、知识脉络,这里只会存储 整理好 或者 已经发布 的文章,不会有临时笔记之类的

  • Obsidian 提供了强大的插件,自动格式化文章的插件,实在是太好用了,是码字者的必备神器

    • 中文和英文/数字之间自动添加空格
    • 中文字符间自动去掉空格
    • 数字和标点之间自动添加空格
    • 行内代码和文字之间自动添加空格
    • 中文符号自动补齐
    • 行内自动格式化,首字母自动大写
    • ……
  • Notion:这是一款笔记、知识库和任务管理整合在一起的协作工具,这里存放了所有的内容,包含写作、视频的规划、Leetcode 刷题规划、每日规划与总结、各类付费账号的到期管理、网络上的文章分类、开源项目的管理等等。

  • Mweb:用于写作、记录一些临时笔记和临时的想法、管理外部的文档等等

  • Typora:主要用于排版,我基于现有的 css 样式,定制了好几款文章、简历样式,文章写好之后,会根据不同的场景使用不同的样式,之后复制粘贴到 WX、知乎、掘金等等平台

不同的工具,在不同的场景下都有各自的作用,上面只是列出了我对这些工具的使用,而今天这篇文章主要介绍 Typora 在 WX 编辑器排版的问题。

让人崩溃的 WX 编辑器

在 WX 上发过文章的朋友,都应该感受过 WX 编辑器是多么的难用,如果用 WX 编辑器排版的话,快则半个小时,慢则 1 个小时以上,因为你需要设置标题、文字、引用、行代码块、代码块等等不同的颜色和大小,而且最后排版的效果也是差强人意。

因此横空出世了很多第三方编辑器: 135 编辑器、秀米编辑器等等,以及在线 Markdown 排版工具:Md2All、mdnice、WXMarkdown 等等,离线的 Markdown 排版工具:Typora 等等。

上述所有的 WX 排版工具,曾今我都尝试过,最后选择使用 Typora 进行文章排版,它主要有以下优点:

  • 丰富的开源主题,可以按照自己喜欢的风格,修改 css 文件,定制文章、简历样式
  • 一键复制到 WX 和知乎等等平台,可以预设值好标题、文字、引用、行代码块、代码块等等不同的颜色和大小,之后复制粘贴到对应的平台上即可
  • 可以根据不同语言设置不同的代码样式
  • 如果用 Typora 进行写作的话,简洁、实时预览、便捷的快捷键都是它的优势,但是我只用它进行排版

Typora 复制代码块到 WX 编辑器没有滚动条的问题

虽然它的优点很多,但是也有不足之处,而今天这篇文章主要来解决,从 Typora 复制代码块到 WX 编辑器没有滚动条的问题。如下图所示。

默认情况下使用 Typora 复制代码块到 WX 编辑器,如果代码的长度超过当前的区域,会自动换行,不会出现滚动条。如果是源码分析类的文章,个人感觉这种方式不太友好,我反而觉得以下滚动效果会更好。(PS: 每个人的感觉不一样)

如果期望在 WX 编辑器实现上面的滚动效果,只需要两步即可实现。

  1. 删除掉 white-space:normal 样式

这里以 Mac 为例,Win 同理,找到 Typora 默认的样式 base.css, Mac 路径如下所示。

/Applications/Typora.app/Contents/Resources/TypeMark/style/base.css

打开 base.css 文件,搜索关键字 ty-contain-cm 删除掉 white-space:normal 样式。

  1. 打开当前文章主题 css 文件,添加以下代码,即可实现滚动效果
#write .md-fences {
overflow-x: auto;
white-space: nowrap;
}

如何找到主题 css 文件

主题 css 文件存放目录如下所示:

打开 Typora -> 点击偏好设置 -> 点击外观 -> 打开主题文件夹

当打开主题存放文件夹,会列出很多主题,找到你正在使用的主题,添加上面的代码即可。

问题的定位和分析过程

这个分析过程也适用于,拷贝其他人现成的样式,如果在 WX 或者其他网站上,看到其他人文章的样式非常好看,可以用这种方式,拷贝过来直接用,或者在它们的基础上稍作修改即可,当然这可能需要简单了解一下基础的 css 知识,只需要能看懂即可。

如果想通过 css 实现横向滚动,有几个核心要素:

  • 滚动区域的父元素,添加横向滚动样式 overflow-x: scroll;
  • 除了添加滚动样式,还需要添加不换行的样式 white-space: nowrap

有了以上基础 css 知识之后,我们还需要找到 Typora 控制代码块的 css 样式,打开 Typora debug 模式: 顶部菜单帮助 -> Enable Debugging

然后在空白处点击鼠标右键,将会出现 「检查元素」的选项, 下图所示。

点击 「检查元素」 的选项,将会弹出调试台,之后选中代码块,右侧将会出现 css 样式代码, 如下图所示。

我们在当前主题的 css 文件中,搜索关键词 #write .md-fences 添加以下滚动代码。

#write .md-fences {
overflow-x: auto;
white-space: nowrap;
}

添加完样式之后,需要重启 Typora 才能生效,之后复制文章内容到 WX 编辑器,然而 结果和我们的预期不一样 ,并没有出现滚动条,代码貌似没有生效。

为什么代码没有生效

当我们拷贝文章的时候,也会拷贝当前使用的 css 样式,因此我们需要分析拷贝后生成的 css 样式,所以我们需要打开 WX 编辑器,按 F12 或者 点击鼠标右键 ->「检查元素」 打开浏览器调试台,分析一下生成后的 css 样式。

正如图中 3 标记的地方,当我们从 Typora 拷贝文章的时候,会自动添加 white-space: normal; 样式,覆盖掉了我们添加的样式 white-space: nowrap; ,我们可以尝试在浏览器调试台去掉这个样式,动画效果如下所示。

正如图中动画效果,当我们去掉 white-space: normal; 样式之后,即可实现了 WX 编辑器横向滚动。定位到原因之后,我们只要在拷贝的时候,删除掉这个样式即可。

我们回到 Typora 调试台,搜索这个样式,看看是由那个 css 文件控制的,如下图示。

我们可以看到这个样式是由 base.cass 文件控制,文件路径在上面图中右侧显示出来了,如下所示。

/Applications/Typora.app/Contents/Resources/TypeMark/style/base.css

找到目标文件之后,搜索图中中间区域标记的关键词 ty-contain-cm,删除掉 white-space:normal 样式,重新从 Typora 拷贝文章到 WX 编辑器,即可实现横向滚动。


最后推荐长期更新和维护的项目:

  • 个人博客,将所有文章进行分类,欢迎前去查看 https://hi-dhl.com

  • KtKit 小巧而实用,用 Kotlin 语言编写的工具库,欢迎前去查看 KtKit

  • 计划建立一个最全、最新的 AndroidX Jetpack 相关组件的实战项目以及相关组件原理分析文章,正在逐渐增加 Jetpack 新成员,仓库持续更新,欢迎前去查看 AndroidX-Jetpack-Practice

  • LeetCode / 剑指 offer / 国内外大厂面试题 / 多线程题解,语言 Java 和 kotlin,包含多种解法、解题思路、时间复杂度、空间复杂度分析

近期必读热门文章

致力于分享一系列 Android 系统源码、逆向分析、算法、翻译、Jetpack 源码相关的文章,在技术的道路上一起前进

Android10 源码分析

正在写一系列的 Android 10 源码分析的文章,了解系统源码,不仅有助于分析问题,在面试过程中,对我们也是非常有帮助的,如果你同我一样喜欢研究 Android 源码,可以关注我 GitHub 上的 Android10-Source-Analysis

算法题库的归纳和总结

由于 LeetCode 的题库庞大,每个分类都能筛选出数百道题,由于每个人的精力有限,不可能刷完所有题目,因此我按照经典类型题目去分类、和题目的难易程度去排序。

  • 数据结构: 数组、栈、队列、字符串、链表、树……
  • 算法: 查找算法、搜索算法、位运算、排序、数学、……

每道题目都会用 Java 和 kotlin 去实现,并且每道题目都有解题思路,如果你同我一样喜欢算法、LeetCode,可以关注我 GitHub 上的 LeetCode 题解:Leetcode-Solutions-with-Java-And-Kotlin

精选国外的技术文章

目前正在整理和翻译一系列精选国外的技术文章,不仅仅是翻译,很多优秀的英文技术文章提供了很好思路和方法,每篇文章都会有译者思考部分,对原文的更加深入的解读,可以关注我 GitHub 上的 Technical-Article-Translation

评论