Typora更换主题背景

一、官网下载主题

地址：Typora Theme

 

二、typora设置主题

 

 我们将下载好的压缩包解压，将压缩包中的.css文件和 css 样式同名的文件夹拷贝到其中打开的文件夹中

三、重启 typora 并选择新主题

四、导出PDF带主题

更多时候，我们会将这些.md导出成pdf，但是，使用typora直接导出是不带主题的。

但是，导出成html，可以带主题。

我们可以先导出成html，再用chrome打印成带主题的pdf。

操作如下：

 typora -> 文件 -> 导出 -> html 

 以上就导出了带格式的PDF

五、导出html带目录

 Typora导出的html不带目录，我们可以，在导出的html里，增加一些代码，自定义目录。

打开typora文件 --> 导出 --> html
用编辑器(记事本,editplus,gvim,vscode,Hbuilder),我用的NotePad++,把如下代码粘贴到下方

....

***粘贴到此处***

hljs.initHighlightingOnLoad();


    //标题序号计数器
    var hCount = [0, 0, 0, 0, 0, 0];
    //设置计数器
    function setHCount(number) {
        //当前计数器加一
        hCount[number - 1]++;
        for (var i = number, length = hCount.length; i < length; i++) {
            //子目录计数器全部置零
            hCount[i] = 0;
        }
    }
    //重命名目录名称
    function setHTagValue(item, number) {
        //获取标题名
        var text = $(item).get(0).innerHTML;
        //初始化空字符串
        var before = "";
        //生成序号
        for (var i = 0, length = hCount.length; i < number; i++) {
            if (i < number - 1)
                before += hCount[i] + ".";
            else
                before += hCount[i] + " ";
        }
        //在标题前面加上序号
        $(item).get(0).innerHTML = before + text;
    }
    function renameHTag(item) {
        var tag = $(item).get(0).localName;
        if (tag === "h1") {
            setHCount(1);
           //console\.log("捕获到标签:%s", tag);
            setHTagValue(item, 1);
        }
        if (tag === "h2") {
            setHCount(2);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 2);
        }
        if (tag === "h3") {
            setHCount(3);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 3);
        }
        if (tag === "h4") {
            setHCount(4);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 4);
        }
        if (tag === "h5") {
            setHCount(5);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 5);
        }
        if (tag === "h6") {
            setHCount(6);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 6)
        }
    }
    $(document).ready(function () {
        $("h1,h2,h3,h4,h5,h6").each(function (i, item) {
            //给类标签编号
            renameHTag(item);
            //获取标签的名字,h1,还是h2
            var tag = $(item).get(0).localName;
            //为该标签设置id属性
            $(item).attr("id", "wow" + i);
            //添加一个页内超链接,并设置class选择器
            //      $("#category").append(''+$(this).text()+'');
            $("#category").append('' + $(item).text() + '');
            //为每一个标题超链接的class属性设置左边距
            $(".newh1").css("margin-left", 0);
            $(".newh2").css("margin-left", 20);
            $(".newh3").css("margin-left", 40);
            $(".newh4").css("margin-left", 60);
            $(".newh5").css("margin-left", 80);
            $(".newh6").css("margin-left", 100);
        });
        //设置class选择器为.book-body的html内容
        $(".book-body").html($(".book-body").nextAll())
    });


    @media (max-width: 1600px) {
        .book-body {
            /* padding-left: 200px; */
            padding-right: 0px;
        }
    }
    @media (max-width: 1400px) {
        .book-body {
            /* padding-left: 200px; */
            padding-right: 0px;
        }
    }
    @media (max-width: 1200px) {
        .book-body {
            /* padding-left: 300px; */
            padding-left: 0px;
        }
    }
    @media (max-width: 700px) {
        .book-body {
            padding-left: 0px;
        }
    }
    @media (min-width: 600px) {
        #category {
            /* 绝对定位 */
            position: fixed;
            /* left: 20px; */
            /* 目录显示的位置 */
            right: 0px;
            top: 0;
            /* 目录栏的高度,这里设置为60%主要是为了不挡住返回顶部和折叠按钮 */
            height: 79%;
            /* 开启垂直滚动条 */
            overflow-y: scroll;
            /* 开启水平滚动条 */
            overflow-x: scroll;
        }
    }
    @media (-webkit-max-device-pixel-ratio: 1) {
        ::-webkit-scrollbar-track-piece {
            background-color: #FFF
        }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }
        ::-webkit-scrollbar-thumb {
            background-color: #c2c2c2;
            background-clip: padding-box;
            min-height: 28px
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #A0A0A0
        }
    }


    // id="category" οnclick="showOrCloseCategory()"
    function showOrCloseCategory() {
        var id = document.getElementById("category");
        var book_body=document.getElementById("book_body");
        //如果展开了
        if (id.style.display == 'block') {
            //console.log("开始展开");
            id.style.display='none';
            id.style.width="0%";
            book_body.style.width="100%";
            book_body.style.paddingleft=0;
        }
        //如果被折叠了
        else if (id.style.display =='none') {
            //console.log("开始折叠");
            id.style.display = 'block';
            book_body.style.width="90%";
            id.style.width="20%"
        }
    }


返回顶部
折叠/展开

 

 

 

六、自定义主题颜色

my.css

RGB配色表

/* 背景颜色和边界目录背景颜色 */
:root {
    --bg-color: rgb(255, 250, 232);
    --side-bar-bg-color: rgb(199, 237, 204);
    --control-text-color: #777777;
}

@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Regular'), url('./github/400.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: normal;
    src: local('Open Sans Italic'), url('./github/400i.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Open Sans Bold'), url('./github/700.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: bold;
    src: local('Open Sans Bold Italic'), url('./github/700i.woff') format('woff');
}

/* 字体大小 */
html {
    font-size: 20px;
}

/* 正文颜色和行高 */
body {
    font-family: 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgb(139, 58, 58);
    line-height: 2.0;
}

/* 正文上下左右空白有多少，实际文本有多宽 */
#write {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    padding-bottom: 100px;
}
#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

a {
    color: #4183c4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}
h1 tt,
h1 code {
    font-size: inherit;
}
h2 tt,
h2 code {
    font-size: inherit;
}
h3 tt,
h3 code {
    font-size: inherit;
}
h4 tt,
h4 code {
    font-size: inherit;
}
h5 tt,
h5 code {
    font-size: inherit;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    padding-bottom: 0.3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
    /* text-align: center; */
}
h2 {
    padding-bottom: 0.3em;
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}
h3 {
    font-size: 1.5em;
    line-height: 1.43;
}
h4 {
    font-size: 1.25em;
}
h5 {
    font-size: 1em;
}
h6 {
    font-size: 1em;
    color: #777;
}

#write h1::before {
    content: 'H1';
    top: 1.2rem;
}
#write h2::before {
    content: 'H2';
    top: 0.8rem;
}
#write h3::before {
    content: 'H3';
    top: 0.6rem;
}
#write h4::before {
    content: 'H4';
    top: 0.4rem;
}
#write h5::before {
    content: 'H5';
    top: 0.23rem;
}
#write h6::before {
    content: 'H6';
    top: 0.22rem;
}

#write h1::before,
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
    position: absolute;
    right: calc(100% + 10px);
    color: #b4b4b4;
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: 'small-caps';
    white-space: nowrap; /* 文本强制不换行 */
    border: 0;
}

p,
blockquote,
ul,
ol,
dl,
table {
    margin: 0.8em 0;
}
li > ol,
li > ul {
    margin: 0 0;
}
hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

li p.first {
    display: inline-block;
}
ul,
ol {
    padding-left: 30px;
}

/* 列表标号颜色 */
ol > li,
ul > li {
    color: rgb(139, 58, 58);
}

/* 目录二级标题颜色以及，列表颜色 */
ol > li > *,
ul > li > * {
    color: rgb(139, 58, 58);
}

ul:first-child,
ol:first-child {
    margin-top: 0;
}
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

/* 引用框内的文本颜色 */
blockquote {
    border-left: 4px solid #8B658B;
	font-size: 1.1em;
    padding: 0 15px;
    color: #8B0A50;
    background-color: rgba(185, 66, 66, 0.1);
}
blockquote blockquote {
    padding-right: 0;
}
table {
    padding: 0;
    word-break: initial;
}
table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n),
thead {
    background-color: #f8f8f8;
}
table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

.CodeMirror-lines {
    padding-left: 4px;
}

.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3);
    border-top: 1px solid #eef2f2;
}

/* 代码块 及背景颜色*/
.md-fences,
code,
tt {
    border: 1px solid #e7eaed;
    background-color: #FFFAFA;
    border-radius: 3px;
    padding: 0;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
}

/* 行内嵌套代码 */
code {
    background-color: rgb(239, 250, 241);
    padding: 0 2px 0 2px;
    color: #008080;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;
}

.md-task-list-item > input {
    margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

/* 代码块背景颜色 */
/*.md-fences {
    background-color: #8B658B;
}*/
#write pre.md-meta-block {
    padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
    bottom: 0.375rem;
}

.md-mathjax-midline {
    background: #fafafa;
}

/* #write > h3.md-focus:before {
    left: -1.5625rem;
    top: 0.375rem;
}
#write > h4.md-focus:before {
    left: -1.5625rem;
    top: 0.285714286rem;
}
#write > h5.md-focus:before {
    left: -1.5625rem;
    top: 0.285714286rem;
}
#write > h6.md-focus:before {
    left: -1.5625rem;
    top: 0.285714286rem;
} */

.md-image > .md-meta {
    /*border: 1px solid #ddd;*/
    border-radius: 3px;
    padding: 2px 0px 0px 4px;
    font-size: 0.9em;
    color: inherit;
}

/* 里面的颜色 */
.md-tag {
    color: #FF0000;
    opacity: 1;
}

.md-toc {
    margin-top: 20px;
    padding-bottom: 20px;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #fafafa;
    border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

/** focus mode */
.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
    visibility: visible;
}

.mac-seamless-mode #typora-sidebar {
    background-color: #fafafa;
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #e6f0fe;
}

#md-notification .btn {
    border: 0;
}

.dropdown-menu .divider {
    border-color: #e5e5e5;
}

.ty-preferences .window-content {
    background-color: #fafafa;
}

.ty-preferences .nav-group-item.active {
    color: white;
    background: #999;
}

七、Typora粘贴图片

typora 下载最新的typora

文件-偏好设置

设置完以后，QQ截图就可以之间，粘贴图片了

 

八、指定字体设置颜色

HTML、快捷键加颜色

下载AutoHotKey

1. 桌面新建txt文件

2. 将后缀改为.ahk

3. 重命名为MyTyporaHotkeyScript.ahk

4. 双击ahk脚本运行

5. Typora检测

Ctrl+Alt+O——橙色Orange

Ctrl+Alt+R——红色Red

Ctrl+Alt+B——蓝色Blue

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

#IfWinActive ahk_exe Typora.exe
{
    ; Ctrl+Alt+o 橙色
    ^!o::addFontColor("orange")

    ; Ctrl+Alt+r 红色
    ^!r::addFontColor("red")

    ; Ctrl+Alt+b 浅蓝色
    ^!b::addFontColor("cornflowerblue")
}

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