软件

Typora 美化、插件的常规设置

波比AI · 5月2日 · 2025年本文共2607个字 · 预计阅读9分钟6次已读

Typora软件很多人应该不陌生吧,是一款我一直在用的Markdown文档编辑器。在单篇Markdown编辑上,很优秀。但自带的几款主题不是太好看。而一个颜值高的编辑器,是可以舒缓心情提高效率的

一、主题

1. 推荐

(1)Draklaoxiongb2ce

Typora 美化、插件的常规设置

主题:https://github.com/liangjingkanji/DrakeTyporaTheme
这款Darke主题一共拥有12个主题风格配色。扁平化风格。
自定义字体、字体大小、行高、段间距:font.css

(2)Notion

Typora 美化、插件的常规设置

主题:https://theme.typora.io/theme/Notion/
该主题有两种风格:原始风格和增强风格。最初的风格以更简单的报价和表格为特色,模仿了concept应用程序。增强的风格使报价背景变暗,并在表格背景上添加交替的颜色,提高了可见性。

2. 安装

  • 首先确定已安装Typora
  • 通过文件 -> 偏好设置 -> 打开主题文件夹打开theme目录
  • 复制你想要的对应主题名称*.css后缀文件 到theme目录下然后重启, 选择菜单 -> 主题

Typora 美化、插件的常规设置

Typora 美化、插件的常规设置

二、插件

1. Typora Plugin

GitHub:GitHub – obgnail/typora_plugin: Typora plugin. Feature enhancement tool | Typora 插件,功能增强工具

(1)安装

  1. 下载插件源码的压缩包,并解压

  2. 进入 Typora 安装路径,找到包含window.html的文件夹 A

    • 正式版 Typora,路径为./resources/window.html

    • 免费版 Typora,路径为./resources/app/window.html

  3. 将解压得到的 plugin 文件夹粘贴进文件夹 A 下

    laoxiongb2c
  4. 进入文件夹A/plugin/bin/

    • Windows 系统:双击运行install_windows_amd_x64.exe,如果看到下图,说明安装成功

    • Linux 系统:以管理员运行install_linux.sh,如果看到下图,说明安装成功

  5. 验证:重启 Typora,在正文区域点击鼠标右键,弹出右键菜单栏,如果能看到常用插件栏目,说明一切顺利

[!tip] Windows 系统也可以通过执行install_windows.ps1安装插件;同理,Linux 系统也可以执行install_linux_amd_x64文件。每个插件都有配置选项,建议根据个人需求进行配置。配置文件夹位于A/plugin/global/settings/

2. VLOOK

GitHub:GitHub – MadMaxChow/VLOOK: VLOOK™ 是优雅好用的 Typora/Markdown 主题包和增强插件。 VLOOK™ is an elegant and practical theme package enhancement plugin for Typora/Markdown.

VLOOK™ 提供了对文档章节、插图、表格、多媒体提供了多种形式的导航、快速定位和内容组织的工具,全面改善和提高发布的 HTML 文件的浏览体验和效率。主要的亮点也就是导出html文件功能强大,主题样式好看!它的官网就是使用这个插件制作而成的,导出的html格式文件可以一键复制、插图放大、表格阅读模式、画中画等,还包括演示辅助,例如激光笔、聚光灯等等。

目录:

目录/文件 说明
[docs] VLOOK™ 快速参考手册、官网及在线服务相关文件
[released] 发布版本的主目录
┠─ [docs] VLOOK™ 快速参考手册 markdown 源文件
┠─ [themes] 默认配套的主题文件
┠─ [samples] 推荐的各种 Markdown 范例文档
┖─ [plugin] 插件主目录
┠─ [lang] 在导出配置中使用的语言包
┠─ meta.txt Typora 导出 HTML 配置... <head />的内容
┠─ plugin_live.txt 在线版本的插件
┖─ plugin.txt Typora 导出 HTML 配置... <body />的内容
[src] 源码目录
┠─ [dev] 开发测试用文件
┠─ [less] 主题 CSS 文件的源文件
┖─ [logo] VLOOK™ 的 logo 资源

(1)安装

  • 从 VLOOK™ 在托管的平台上下载最新发布版本(VLOOK-released.zip)
  • 打开 Typora 偏好设置 Markdown
  • 启用 Markdown 扩展语法 和 代码块 下的所有选项

Typora 美化、插件的常规设置

三、自定义

打开调试模式

Typora 美化、插件的常规设置

左侧目录树样式

/* 文件名换行 */
.file-tree-node .file-node-title{
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 文件夹前打开、关闭状态 */
.file-node-open-state{
    display: none;
}

/* 激活文件背景色 */
.file-tree-node.active>.file-node-background{
    background-color:rgba(0, 0, 0, 0) !important;
    border: 0px !important;
}

/* 激活文件背景色 */
.file-tree-node.active>.file-node-content{
    background-color: #323232;
}

/* 隐藏目录图标 */
.file-node-icon{
    display: none;
}

编辑区样式

/* 编辑区样式 */
#write{
    max-width: 100%;
    padding: 10px 0px;
}

/* 图片居左显示 */
p>.md-image:only-child:not(.md-img-error) img{
    margin: 0 !important;
}

/* 限制图片宽度 */
#write .md-image img{
    width: 1400px;
}

p .md-image:only-child {
  width: auto;
  text-align: left;
}

/* 行内代码 */
code {
    background-color: rgba(66, 185, 131, 0.1);
    paddinbobyaig: 0 2px 0 2px;
    color: #42b983;
}
[Total: 0 Average: 0]
0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!