ReText——Linux 上的轻量级 Markdown 阅读/编辑器，附使用说明

发现频道 🔎
1

软件名称

ReText

推荐类型

【用户推荐】

软件平台

Linux

项目首页

价格

免费，同时以 GPL-2.0 开放源代码

特点

  • 没啥特点，就是在常见发行版本默认的软件仓库中，安装比较方便（比如在 Ubuntu 上，执行命令 sudo apt install retext 即可）
  • 读取和渲染 markdown 文档的速度比较快。
  • 支持自定义渲染 markdown 文档使用的 css 文档，另外支持添加一些插件，实现语法扩展。

软件截图（也是我折腾完的效果图）

2024-09-16 21-45-28 创建的截图.png

简单折腾指南

1 语法扩展

以 Ubuntu/Debian 系统为例，

1.1 安装必要的软件包

首先需要安装两个软件包：

sudo apt install libjs-mathjax python3-pygments

其中，

  • libjs-mathjax 用于渲染数学公式
  • python3-pygments 用于实现代码高亮

然后，安装两个 python 软件包，用于实现语法扩展（这部分可根据个人需求酌情添加）：

pip install markdown_sub_sup markdown_mark

其中，

  • markdown_sub_sup 用于实现上下标扩展语法（^123^ 为上标，~123~ 为下标，等效于 <sub>123</sub>、<sup>123</sup>）。
  • markdown_mark 用于实现高亮扩展语法（==123== 为高亮，等效于 <mark>123</mark>）

1.2 启用插件

安装好后，打开 ReText 软件，点击 编辑→个人偏好设定，在 “行为” 选项卡的 “Mark扩展语法” 栏目中输入：

mdx_math(enable_dollar_delimiter=1), codehilite, markdown.extensions.toc, markdown_sub_sup, markdown_mark

这一步是为了启用一些扩展功能，以下是各个参数的解释：

  • mdx_math(enable_dollar_delimiter=1)：启用行内公式，即 $\int x^2$ 渲染成 \int x^2 的形式。
  • codehilite：启用代码语法高亮。
  • markdown.extensions.toc：启用目录功能，在文档中单独起一行，输入 [TOC] 即可在此处生成一个目录。
  • markdown_sub_sup：启用上下标扩展语法
  • markdown_mark：启用高亮扩展语法

1.3 启用 WebEngine 渲染器

最后，点击 编辑→使用 WebEngine (Chromium) 渲染器，以便各种元素能被正常渲染。

2 自定义 CSS 文件

打开 ReText 软件，点击 编辑→个人偏好设定，点击 “交互界面” 选项卡 “样式表文件” 栏目后面的按钮，选择一个 CSS 文件，用于渲染 markdown 文档。我这里准备了一个现成的 CSS 文档，一会儿发在二楼。

3 调整代码语法高亮主题

1.1 中我们已经启用了代码高亮功能，但目前使用的还是默认颜色主题，这套主题不是特别美观。可以按照如下方案，换上另一套更漂亮的主题：

  1. 文件管理器进入 /usr/lib/python3/dist-packages/pygments/styles，找到 default.py 文件，将其重命名为 default.py.bak。
  2. 将该目录下的 rainbow_dash.py 复制一份，副本重命名为 default.py。
  3. 打开 default.py，做一些修改：
    • 第 18 行，__all__ = ['RainbowDashStyle'] 改为 __all__ = ['DefaultStyle']
    • 第 39 行，class RainbowDashStyle(Style): 改为 class DefaultStyle(Style):
  4. 完成上述修改后，保存并退出。接下来重新打开 ReText 软件即可。
1 个赞
2

这是我根据网上现有的资料编写的一个 CSS 文档：

其中，"更纱黑体 UI SC" 可以替换成任何您喜欢的正文字体，"等距更纱黑体 SC" 可替换成任何您喜欢的等宽字体/代码字体。

body {
    margin: 0 auto;
    font-family: "更纱黑体 UI SC", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "MathJax_Math", "MathJax_Main", "MathJax_Size1", "MathJax_Size2";
    color: #000000;
    line-height: 1.5;
    padding: 16px;
    background-color: #ffffff;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 0;
}

p,blockquote,table {
    margin: 1.2em 0;
}

ul,ol,dl{
    margin: 0.4em 0;
}

p {
    padding: 0;
    /* margin-bottom: .e; */
}

h1 {
    font-size: 21px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 19px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 17px;
}

h6 {
    font-size: 16px;
}

a {
    color: #0099ff;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
    word-break: break-word;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

ul, ol {
    padding: 0;
    padding-left: 24px;
}

li {
    line-height: 24px;
}

li ul, li ol {
    margin-left: 16px;
}

p, ul, ol {
    font-size: 16px;
    line-height: 24px;
}

pre {
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

code {
    padding-left: 0.2em;
    padding-right: 0.2em;
    font-family: "等距更纱黑体 SC";
    color: #e96900;
    background-color: #f8f8f8;
    word-break: break-word;
}

pre code {
    display: block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: #222222;
    background-color: #F3F3F3;
    line-height: 1.5;
    font-family: "等距更纱黑体 SC";
    white-space: pre;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

aside {
    display: block;
    float: right;
    width: 390px;
}

blockquote {
    border-left: 4px solid #42b983;
    padding: 0 1em;;
    color: #777;
    background-color: rgba(66, 185, 131, .1);
}

blockquote p {
    color: #000000;
}

hr {
    display: block;
    text-align: left;
    margin: 1em 0;
    border: none;
    height: 2px;
    background-color: #999999;
}

img {
    display: block;
    margin: 0 auto;
}

table {
    padding: 0;
    width:100%;
    margin: 1rem 0;
    border-collapse: collapse;
 }
 
 table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0;
 }
 
 table tr:nth-child(2n){
     background-color: #f8f8f8;
 }
 table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    background-color: #f2f2f2;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
 }
 
 table tr td {
    border: 1px solid #cccccc;
    margin: 0;
    padding: 6px 13px;
 }
 
 table tr th :first-child, table tr td :first-child {
    margin-top: 0;
 }
 
 table tr th :last-child, table tr td :last-child {
    margin-bottom: 0;
 }
3

markdown如果要弄css，不如直接上html。

markdown根本上等同html渲染器。