Typora切换字体颜色

news2024/9/22 15:28:57

欢迎大家到我的博客浏览。Typora切换字体颜色 | YinKai's Blog

最近很无聊，突然想起来朋友的 Typora 可以修改字体颜色，而我的却不能，我就去研究了一下，于是有了这一篇教学文章。

可能会有人说，网上大佬早有教学了，为啥还要看你的呢？

原因有两点：

大佬是一段时间前发的了，可能会存在一些版本问题，而是较新的文章会在前人的基础上，并把一些坑给大家踩了，并告诉大家；
我和在大佬们的基础上完善了其他功能。🤩

下面，正式开始今天的内容。

不知道大家有没有好奇过，为什么我们可以直接在 Typora 中写的文章或者字体的样式，就跟最后展示在浏览器中的几乎一样？

因为 Typora 是所见即所得的 (WYSIWYG) 编辑器，也就是允许用户直接在编辑器中直接看到最终输出的样式，而不需要在源代码和预览之间切换。

Typora 支持 Markdown，并且在编辑时会即时渲染 Markdown 格式，同时也支持直接插入和展示 HTML 标签。当你在 Typora 中写入 HTML 标签时，Typora会将其解析并在编辑区域中渲染相应的效果，因此你可以直观地看到最终的样式。

基于上面的原理，我们就可以很直接想到一种为字体增加颜色的方法：直接加标签。

加标签

什么意思呢？就比如我们想给下面这句话变成红色：

那么我们可以直接使用 html 的标签，修改它的颜色 <font color="red">下面，正式开始今天的内容</font>，效果如下：

加别的颜色，我们只需要修改 color 后的参数即可。

这是最简单，也是比较笨且复杂的一种方法。那么懒惰的我们怎么可能采用这种方法呢？于是，便有了快捷键的方法。

快捷键

有人可能会说，Typora 不支持快捷键加颜色啊，怎么使用快捷键啊？

Typora 不支持，但我们可以自己写脚本来增加快捷键啊~

原理很简单，就是基于我们的 ” 笨方法 “。我们可以通过写一个 AHK 脚本，来为我们选中的内容，做一些修改，比如：先将我们需要更改颜色的内容复制下来，然后加上颜色标签，再将内容粘贴到标签后。这样就可以一键实现增加颜色啦~

具体的实现步骤如下：

我们这里使用 AutoKotKey 这一款脚本语言和自动化工具，它允许用户编写脚本来定义自己的快捷键、自动化复杂任务，以及实现各种自定义的键盘和鼠标行为。

工具安装

我们这里就使用旧版本，点击这里下载，下载完成后就无脑安装即可。

编写脚本

先把脚本给大家：

; Typora
; 快捷增加字体颜色
; SendInput {Text} 解决中文输入法问题

#IfWinActive ahk_exe Typora.exe
{    
    ; alt+0 红色
    !0::addFontColor("black")
  
    ; alt+1 红色
    !1::addFontColor("red")

    ; alt+1 橙色
    !2::addFontColor("orange") 

     ; alt+3 黄色
    !3::addFontColor("yellow")

     ; alt+4 绿色
    !4::addFontColor("green")

    ; alt+5 浅蓝色
    !5::addFontColor("cornflowerblue")

     ; alt+6 青色
    !6::addFontColor("cyan") 

   ; alt+7 紫色
    !7::addFontColor("purple")
}

; 快捷增加字体颜色
addFontColor(color){
    clipboard := "" ; 清空剪切板
    Send {ctrl down}c{ctrl up} ; 复制
    SendInput {TEXT}<font color='%color%'>
    SendInput {ctrl down}v{ctrl up} ; 粘贴
    If(clipboard = ""){
        SendInput {TEXT}</font> ; Typora 在这不会自动补充
    }else{
        SendInput {TEXT}</ ; Typora中自动补全标签
    }
}

原理很简单，就是定义快捷键，然后通过不同的快捷键，绑定不同的参数传给 addFontColor 函数，以此来实现不同的快捷键，增加不同的颜色的效果。大家可以根据自己的喜好，修改对应的快捷键与其对应的颜色。

我们在 AHK 完毕后，在桌面或者任何地方，创建一个 .txt 文件，把上面的脚本复制进去，然后修改文件后缀名为 .ahk，修改完成后是这样的：

然后我们双击一下该脚本，电脑右下角就会多一个这样的图标：

这就代表我们的脚本已经在运行了，我们就可以用 Typora 随便打开一个 .md 文件，然后去试一试效果啦~

路人乙说，“你这跟网上的教程也没差啊，哪里来的增加功能？

哎嘿嘿，你别急，我话还没说完呢。

究极版快捷键

大家其实真正在使用就会发现，单纯这样使用快捷键也不是很方便，有时候一不小心加错颜色的话，还得把标签一个一个删除才能修改颜色或者删除颜色。

我也经历了之后，才想着有没有更好的办法。于是我便尝试在原有脚本的基础上，进行修改，便有了下面的 “ 究极版 ” 快捷键切换字体颜色脚本：

#IfWinActive ahk_exe Typora.exe
{  
    ; alt+0 红色
    !0::toggleFontColor("black")
  
    ; alt+1 红色
    !1::toggleFontColor("red")

    ; alt+1 橙色
    !2::toggleFontColor("orange") 

     ; alt+3 黄色
    !3::toggleFontColor("yellow")

     ; alt+4 绿色
    !4::toggleFontColor("green")

    ; alt+5 浅蓝色
    !5::toggleFontColor("cornflowerblue")

     ; alt+6 青色
    !6::toggleFontColor("cyan") 

   ; alt+7 紫色
    !7::toggleFontColor("purple")
}

toggleFontColor(color){
    clipboard := "" ; 清空剪切板
    Send {ctrl down}c{ctrl up} ; 复制
    ClipWait ; 等待剪切板内容变为非空
    clipboardText := clipboard

    ; 提取颜色标签
    if (RegExMatch(clipboardText, "<font color='([^']*)'>", match)) {
        currentColor := match1
        ; 去掉颜色标签
        clipboardText := <font color='red'>RegExReplace(clipboardText, "<font color='[^']*'>", "")</font>"]'")
        clipboardText := RegExReplace(clipboardText, "</font>", "")
        
        ; 添加新的颜色标签
        if (currentColor != color) {
            clipboardText := "<font color='" . color . "'>" . clipboardText . "</font>"
        }
    } else {
        ; 添加颜色标签
        clipboardText := "<font color='" . color . "'>" . clipboardText . "</font>"
    }

    ; 粘贴处理后的文本
    SendInput {TEXT}%clipboardText%
}

在原有脚本的基础上，我增加了两个功能：