方法一:下载自己喜欢的样式

Typora的代码块语法高亮使用的是CodeMirror实现的,所以需要更换代码块的样式,可以去CodeMirror提供的主题里下载样式表文件。

CodeMirror页面,选择下图中的Themes,即可跳到代码块样式展示界面。

在代码块样式展示界面可以浏览相应样式的高亮效果:

然后到主题里选择相应的样式表文件,其css源代码会以html页面展示:

然后在typora中使用快捷键Ctrl+,(或者:文件->偏好设置->外观)打开偏好设置后选择外观:

点击上图红框部分,会弹出主题所在文件夹,建立相应的copy的css样式文件,如以dracula为例:

然后将其代码中所有的.cm-s-dracula改为.cm-s-inner,其他样式的修改方式也如同此。重开typora窗口生效。主题下多了dracula的选项,选中即可,这种修改方式产生的主题只改变代码块的高亮样式。

方法二:获取Typora自制主题

文件->偏好设置->外观中点击右下角的获取主题,有很多已有的主题供选择,不乏一些好看的主题样式加高亮代码:

选择一个自己喜欢的进行下载,将下载得到的文件夹解压,以catfish为例,将文件夹内的:

红框部分的文件拷贝到typora的themes文件夹下(方法一中已经说明如何快速定位到此本地的主题文件夹),如图:

重启typora窗口生效。此方式得到的是一个完整的主题。

方法三:自己撰写css样式文件

如果现有的主题样式都不喜欢那就自己仿着现有代码高亮样式的格式写吧,写一个自己最喜欢的。

参考https://ruterly.com/2017/01/10/Typora/

Typora 修改代码块高亮样式的更多相关文章

  1. Typora设置代码块Mac风格三个圆点

    写作不停,美化不止! mac小圆点效果 原本代码块样式就挺....干净的,光秃秃的,太单调了: 是吧很丑,于是自己发挥改成了这样: 好吧还是太单调,也没好看到哪里去,于是隔了两天又重新改,DuangD ...

  2. Typora markdown代码块显示序号

    打开偏好设置,找到代码块 打开显示行号 然后关闭Typora重新打开 此时代码块就有行号了

  3. 从此 Typora 代码块有了颜色

    起因 平时喜欢用typora记笔记,但是typora默认代码块没有指定语言,没有高亮看着很不舒服,所以用Autohotkey花了半天写了个脚本,按自己的快捷键就可以自动生成代码块并添加语言,这样就方便 ...

  4. CSDN Markdown编辑器插入代码块时不能代码高亮

    当我们点击插入代码块按钮,会提示我们在这里插入代码片,我们在三个单引号对之间输入代码后发现并没有实现代码块高亮, 如下图所示: <!DOCTYPE html> <html lang= ...

  5. 一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器

    有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块. 花了一点时间研究了一下各家的编辑器,规则却各不相同.有的要求代码块被包含于 <code> ... &l ...

  6. 用Python高亮org-mode代码块

    文章同时可在我的github blog上阅读:http://cheukyin.github.io/python/2014-08/pygments-highlight-src-export-html.h ...

  7. [置顶] 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)

    由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...

  8. 如何使用SublimeText风格的代码高亮样式 添加Zed Coding(EMMET)插件

    因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式. 虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努 ...

  9. 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)

    由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...

随机推荐

  1. 零信任三大技术之SDP

    SDP概述 SDP Software Defined Perimeter(软件定义边界),2013 年由云安全联盟 CSA提出. SDP 设计基本原则 1.信息隐身:隐藏服务器地址.端口,使之不被扫描 ...

  2. .NET测试--模拟框架NSubstitute

    .NET测试--模拟框架NSubstitute .NET测试 NSubstitute在GitHub的开源地址:https://github.com/nsubstitute/nsubstitute/do ...

  3. XXL-JOB v2.3.0 发布 | 易用性增强

    转: XXL-JOB v2.3.0 发布 | 易用性增强 v2.3.0 Release Notes 1.[新增]调度过期策略:调度中心错过调度时间的补偿处理策略,包括:忽略.立即补偿触发一次等: 2. ...

  4. vscode undefined reference to `_imp__WSAStartup@8

    vscode undefined reference to `_imp__WSAStartup@8' 使用vscode和g++编译.cpp时,报出如题错误,如下图: 查了百度之后,在.vscode/t ...

  5. java将一个list转换成一个String,中间用分隔符隔开

    List sn=[123,1231,1231,231] sn.toString();//[123,1231,1231,231] sn.join(',').toString();//123,1231,1 ...

  6. Python爬虫学习三------requests+BeautifulSoup爬取简单网页

    第一次第一次用MarkDown来写博客,先试试效果吧! 昨天2018俄罗斯世界杯拉开了大幕,作为一个伪球迷,当然也得为世界杯做出一点贡献啦. 于是今天就编写了一个爬虫程序将腾讯新闻下世界杯专题的相关新 ...

  7. 【odoo14】第十四章、CMS网站开发

    第十四章.CMS网站开发** Odoo有一个功能齐全的内容管理系统(CMS).通过拖放功能,你的最终用户可以在几分钟内设计一个页面,但是在Odoo CMS中开发一个新功能或构建块就不是那么简单了.在本 ...

  8. Java并发编程之同步辅助类

    CountDownLatch 在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待,基于AbstractQueuedSynchronizer实现,state初始化为count,每cou ...

  9. Hi3559AV100 NNIE开发(7) Ruyistudio 输出mobileface_func.wk与板载运行mobileface_chip.wk输出中间层数据对比

    前面随笔讲了关于NNIE的整个开发流程,并给出了Hi3559AV100 NNIE开发(5)mobilefacenet.wk仿真成功量化及与CNN_convert_bin_and_print_featu ...

  10. 使用KeepAlived来实现高可用的DR模型

    环境 VMware 16 CentOS8 相关软件 keepalived ipvsadm httpd 准备工作 准备四个节点,如上图,Node01 ~ Node04, 本文默认你会在VMWare上安装 ...