前言
分享本人在使用Typora编辑器过程中使用到的一些实用技巧,之后有新的技巧会继续更新。
编辑博客时插入空行
:加在当前空行(注意:不要漏掉分号)<br />
:加在上一行尾部
更多颜色
AutoHotkey自定义文本颜色
AutoHotkey是一款 windows 平台下的热键脚本语言程序。可以实现诸如窗口置顶、快速输入、快捷操作等丰富多彩的功能,能够通过自定义脚本实现很多快捷、自动化操作,乃至创建图形界面程序,而且占用资源极小,是一个能够高度自定义、可用性极高的工具,官网:https://www.autohotkey.com/
下载好后,新建MyHotkeyScript.txt
文本文件,打开并复制以下内容:
#IfWinActive ahk_exe Typora.exe
{
!0::addFontColor("black")
!1::addFontColor("red")
!2::addFontColor("orange")
!3::addFontColor("yellow")
!4::addFontColor("green")
!5::addFontColor("cornflowerblue")
!6::addFontColor("cyan")
!7::addFontColor("purple")
}
addFontColor(color){
clipboard := ""
Send {
ctrl down}c{
ctrl up}
; SendInput {
Text}
SendInput {
TEXT}<font color='%color%'>
SendInput {
ctrl down}v{
ctrl up}
If(clipboard = ""){
SendInput {
TEXT}</font>
}else{
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} ; 解决中文输入法问题
SendInput {
TEXT}<font color='%color%'>
SendInput {
ctrl down}v{
ctrl up} ; 粘贴
If(clipboard = ""){
SendInput {
TEXT}</font> ; Typora 在这不会自动补充
}else{
SendInput {
TEXT}</ ; Typora中自动补全标签
}
}
之后将文件名修改为MyHotkeyScript.ahk
,双击文件运行【用AutoHotkey运行】,重启Typora即可使用。
修改引用段落颜色
修改引用段落、高亮文本颜色的步骤:
- 点击鼠标右键—>检查元素
- 在弹出的页面中,点击左上角带箭头的选项
Select an element in the page to inspect it
,回到原文,定位到引用段落blockquote
- 然后按照下图所示,进行颜色修改,并记住修改颜色的HEX值(比如#4db7d4)
- 然后打开主题文件(比如github.css),定位到如下代码段,更新修改颜色的HEX值:
blockquote {
border-left: 4px solid #62bfd8;
padding: 0 15px;
color: #75716c;
}
- 之后再重新打开Typora就完事了
插入网络视频
Typora是一款强大的Markdown编辑器,强大到可以在Typora内部直接插入网络视频,直接在Typora内部观看!
- 其实就是插入HTML代码,比如下面这个:
<iframe src="//player.bilibili.com/player.html?aid=35579542&bvid=BV1Yb411c7Hi&cid=62389005&page=1" width="300" height="500" scrolling="no" border="10" frameborder="no" framespacing="no" allowfullscreen="true"> </iframe>
-
其效果如下:
-
关键是需要找到视频对应的嵌入代码,比如b站上视频的嵌入代码就在这里:
- 然后直接按照上面HTML代码进行修改就好,包括修改嵌入视频的大小宽高等
自定义插入图片
- 将图片的宽缩放至50%,高缩放至70%,位置居左,如果路径错误,图片不显示,则显示"图片名称"
- align=left /> left后面有空格
- 不设置align,默认居中
<img src="images\demo.png" width="50%" height="70%" alt="图片名称" align=left />
- 将图片宽高设置为600px和370px,居右显示,如果路径错误,图片不显示,则显示"图片名称"
<img src="images\demo.png" width = 600px height = 370px alt="图片名称" align=right />
- 相对路径
<img src = "images\demo.png" width="700px">
- 绝对路径
<img src = "C:\Users\lenovo\Desktop\images\demo.png" width="700px">
自定义导出PDF
- 调整字体大小,复制下面代码到正在使用的主题文件(如github.css)中:
/* 修改导出的PDF中内容的格式(字体、图片等) */
@media print {
/* 原CSS中有该属性,添加部分内容或修改部分内容即可 */
html,
body {
/* PDF中,源码字体和内容字体的大小 */
font-size: 12px;
}
table,
pre {
page-break-inside: avoid;
}
pre {
word-wrap: break-word;
}
}
- 调整页面大小,直接上图: