分享几个 Markdown 写作软件 Typora 的骚操作

Hello 大家好,我是阿粉,Markdown 语法想必很多写作的朋友都了解(不了解的可以网上找找,绝对是写作装逼必备神器),Typora 软件必定是 Markdown 写作的一大利器(阿粉不接受反驳),今天阿粉给大家分享一下 Typora 的几个骚操作,我们来一起看下吧。

背景

使用过 Typora 的朋友都知道这个软件可以将写好的 Markdown 文件进行导出,而且导出的格式也有很多种,如下图所示,阿粉要分享的几个骚操作都是基于文件导出的,如果说你只是写文章,不需要导出,那阿粉只能说你太年轻,Typora 能做的事情必定很多,你还需要好好开发。

首先我们在软件的菜单栏可以看到,文件导出支持多种格式,如下图:

image-20200721233659545

最常用的无非就是导出 PDF,常规的导出 PDF 没什么问题,但是往往有点时候我们希望导出的 PDF 能更加美观一点,以及最好能带上水印。

导出 PDF 增加水印

制作水印图片

既然我们希望导出的 PDF 有水印,那首先我们需要一个水印图片,有 Photoshop 的朋友可以自行制作一个,没有 Photoshop 的朋友,阿粉推荐一个在线制作网站https://ps.gaoding.com/#/,新建透明背景项目。image-20200721235012671

阿粉制作了一个我们 Java 极客技术的水印图片如下:

javajiketech

自定义主题

制作好了水印图片后,我们打开 Typora 软件,找到设置打开主题文件夹,如下,阿粉这里是 macOS,Windows 应该也差不多。

image-20200721235509241

打开文件夹过后,我们做这么几件事情

  1. 复制一个主题文件夹和 css 文件,比如我这里有一个 GitHub 的主题,我复制成 jeek-github 文件夹,以及一个 css 文件也复制了一份;
  2. 创建对应主题的用户 css 文件,这里我创建了一个 jeek-github.user.css 文件,主要是避免直接修改源文件;
  3. 将制作的水印图片复制到当前文件夹中;

image-20200722000008491

  1. 编写自定义 css 样式

    打开 jeek-github.user.css 文件,我们增加如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* 写作区显示水印*/
    #write {
        background-color: rgba(255, 255, 255, 0.28);
        background: url("./javajiketech.png") repeat-y center center;
        background-size: contain;
    }
       
    /* 导出 PDF 显示水印*/
    @media print {
        #write {
            background: none;
        }
        body {
            background: url("./javajiketech.png") repeat-y center center;
            background-size: 700px 370px;
            height: auto;
        }
    }
    

    这里将图片名称换成你自己的,图片的大小需要根据你的水印大小进行填写,可以先写好然后重新打开软件,导出一个 PDF 看看效果,测试一下,找到最佳的大小。

    比如本文,我导出的效果如下所示:

    image-20200722000811942

根据这种操作,你可以根据写作的内容不同,制作多套水印,在菜单主题栏中自行切换需要的水印,阿粉这里就设置了两套,一套是平时写公号文章使用的 Java 极客技术水印,一套是工作写接口文档使用的公司的 logo 水印,两种无缝切换,爽歪歪。

导出 PDF 中自动换页

细心的朋友可能会发现,我们有时候导出的 PDF 有些地方没有换行,比如我们想要在每个一级标题结束后都从新的一页开始下面内容。强大的 Typora 也是有解决方案的,方案有两种,我们来看一下。

强制换页

我们在想要开发新的一页的地方加上<div style="page-break-after: always;"></div> 这样一行代码即可实现。Markdown 语法是支持编写 HTML 的,所以增加这行代码是完全没有问题的。那如果很多地方都需要增加,写起来也是很麻烦的,那我们就可以采用第二种方案。

换页 CSS

还是在我们之前新增的主题对应的用户 css 文件里面增加几行样式,比如阿粉这里就是在 jeek-github.user.css 里面增加如下代码

1
2
3
4
5
6
7
8
9
/* 导出 PDF 显示水印*/
@media print {
    h1 {
        page-break-before: always;
    }
   h1:first-of-type {
       page-break-before: avoid;
   }
}

阿粉这里设置的是在 h1 标签也就是一级标题结束后换页,如果你需要在二级标题后换页只要把 h1 改成 h2 即可。另外除了这些样式之外,任何你想输出的样式都可以实现,字体,颜色等等,都可以通过自定义样式来实现。如何你特别擅长前端,完全可以制作自己喜欢的主题样式。

总结

现在 Typora 已经是阿粉工作中必不可少的一款软件了,除了日常公号写文章之外,平时工作也会写一些接口文档设计文档。可能很多人觉得写文档不应该用 Word 么,为什么要用 Markdown 呢?这个阿粉不好解释,喜欢的人自然喜欢,Word 对阿粉来说繁琐了一点,虽然功能强大,但是毕竟用不上,Markdown 相对而言就简单很多,写起来也特别快,不用关注编排,写完内容也就编排完了。建议大家可以试试,你会爱上它的。

写在最后

最后邀请你加入我们的知识星球,这里有 1800+ 优秀的人与你一起进步,如果你是小白那你是稳赚了,很多业内经验和干活分享给你;如果你是大佬,那可以进来我们一起交流分享你的经验,说不定日后我们还可以有合作,给你的人生多一个可能。

Java Geek Tech wechat
欢迎订阅 Java 极客技术,这里分享关于 Java 的一切。