typora美化日記

本文轉載自查看原文 2021-02-04 10:56 398 markdown系統講解

typora美化日記
- 改進原因
- 改進措施
以下為轉載內容
PicGo配置Gitee圖床

typora美化日記

如果覺得對你有幫助，請點贊轉發哦如需轉載，請注明出處https://www.cnblogs.com/wqcstudy/p/14371407.html

如果你有更好的想法請在評論區留言我們一起打造更好用的typora吧！

改進原因

作為一個程序員小萌新擁有一款輕量簡介的md編輯軟件，快速打造圖文並茂的博客文章可謂至關重要。typora就是一款不錯的選擇，剛開始使用時感覺終於找到有比word更好用的編輯軟件，特別是針對程序員群體，但當我完成第一篇日記時，typora的一點小缺陷就暴露出來了，作為生成輕量的md文件，文件本身只保留文本，而將圖片另外存儲在文件夾中，因此將md文件發送給別人或者復制到博客時就會出現圖片缺失的情況，同時typora需要借助pandoc才能夠完成導出操作。

改進措施

1.自帶的css樣式進行修改

方面如下：

調整文本對齊位置及行距更加符合書寫習慣
將高亮操作改進為字體變紅（感覺黃色背景效果的高亮沒啥用）
正文字體不變（換成其它字體效果不太好）代碼塊字體換為JetBrainsMono字體加以區分並且高亮效果后更加美觀
選中時的顏色改進為綠色（比原本灰色更醒目）

源碼提供如下（保存為github.css 替換打開設置中主題文件夾中的github.css格式即可）

注意：改變代碼塊字體需要新建base.user.css 源碼按此分兩段

:root {
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
}

@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: 16px;
}

body {
    font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

#write {
    max-width: 1000px;
  	margin: 0 auto;
  	padding: 30px!important;
    padding-bottom: 100px;
}
mark{
	background:none!important;
	color:#ff0000!important;
}
#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: .3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
   padding-bottom: .3em;
    font-size: 1.85em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}
h3 {
    font-size: 1.6em;
    line-height: 1.43;
}
h4 {
    font-size: 1.35em;
}
h5 {
    font-size: 1.2em;
}
h6 {
   font-size: 1em;
    color: #777;
}
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;
}
ul:first-child,
ol:first-child {
    margin-top: 0;
}
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}
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,.3);
    border-top: 1px solid #eef2f2;
}


.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: #f8f8f8;
}
#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: .375rem;
}

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

#write>h3.md-focus:before{
	left: -1.5625rem;
	top: .375rem;
}
#write>h4.md-focus:before{
	left: -1.5625rem;
	top: .285714286rem;
}
#write>h5.md-focus:before{
	left: -1.5625rem;
	top: .285714286rem;
}
#write>h6.md-focus:before{
	left: -1.5625rem;
	top: .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: #a7a7a7;
    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;
}


strong .md-plain{font-size:17px!important;font-weight:bold!important;}
blockquote{border-left:4px solid #62ca38!important;background:#f8f8f8!important;padding:10px!important;}
.md-image  img {
    display: inline-block;
    background: #eee!important;
    border: 10px solid #eee!important;
    padding: 5px!important;
}
code{
    background-color: #0ea014!important;
    color: #fff!important;
    padding: 2px 10px!important;
}

.md-fences,
code,
tt {
    border: 1px solid #e7eaed;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
}

code {
    background-color: #f3f4f4;
    padding: 0 2px 0 2px;
}  
::selection {
    background-color: #d1ff79;
}

/*設置代碼塊的字體*/
.CodeMirror-wrap .CodeMirror-code pre {	
	font-family: "JetBrains Mono", "Microsoft YaHei"
}

2.官網下載的其它格式

我覺得代碼快背景黑色以及整個背景黑色沒有什么太大用處，我選擇的是暖色效果（對眼睛比較有好處叭）

該主題也按照自帶主題github的修改方式進行了同樣的修改（base.user.css是公用的如果已經添加了不需要更改）

:root {
    --bg-color: #fffbe8;
    --text-color: #499504ff;
    /*change color of meta characetrs like `*` in markdown */
    --md-char-color: #577909;
    /*change color of meta contents like image text or link address in markdown */
    --meta-content-color: #0d1171ff;
    --table-border-color: #ddd6c1;

    /* color of primary buttons */
    --primary-color: #b58900;
    --primary-btn-border-color: #cc9a00;
    --primary-btn-text-color: #fff;

    /*border for sidebar, etc*/
    --window-border: 1px solid #eee8d5;

    /*background color if list item in file tree or file list*/
    --active-file-bg-color: #dfca8844;
    --active-file-text-color: inherit;
    --active-file-border-color: #cc9a00;

    /*change background of sidebar*/
    --side-bar-bg-color: #eee8d5;
    /*background of control items when hover, like menu in sidebar*/
    --item-hover-bg-color: #dfca8844;
    --item-hover-text-color: inherit;
    /*monospace font for codes, fences*/
    --monospace: "Monaco", "Consolas", monospace;

    --rawblock-edit-panel-bd: #eee8d5;

    --search-select-bg-color: #b58900;
    --active-search-item-bg-color: #dfca88;
}

p {
    margin: 0.5rem 0;
}

code,
.md-fences,
tt {
    font-size: 1rem;
    border: 1px solid #ddd6c1;
    border-radius: 0.25rem;
    padding: 0 0.125rem;
    background: transparent;
    /* font-family: var(--monospace); */
}

blockquote {
    background-color: var(--side-bar-bg-color);
    position: relative;
    margin: 1rem 0rem 1.25rem 0rem;
    padding-left: 0.75rem;
    font-family: var(--monospace);
}

blockquote::before {
    content: "";
    position: absolute;
    left: 0rem;
    height: 100%;
    width: .25rem;
    background: var(--primary-color);
}

table {
    border: 1px solid #ddd6c1;
    margin: 1rem 0;
}

thead {
    background: #e8dfc4;
}

table tr:nth-child(2n) {
    background: #eee8d5;
}

td,
th {
    padding: 0.35rem 0.7rem;
    border: 1px solid #ddd6c1;
}

hr {
    border-color: var(--table-border-color);
}

mark {
    padding: 2px 1px;
    color: darkred;
}

#write {
    position: static;
    padding-left: 10ch;
    padding-right: 10ch;
    line-height: 1.6;
    transform: none;
}

/* YAML block on the top */
#write .md-meta-block {
    background-color: #eee8d5b0;
    border-bottom: 2px solid #ddd6c1;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

#write .md-task-list-item>input {
    -webkit-appearance: initial;
    display: block;
    position: absolute;
    border: 1px solid #ddd6c1;
    border-radius: 0.25rem;
    margin-top: 0.1rem;
    margin-left: -1.8rem;
    height: 1.2rem;
    width: 1.2rem;
    transition: background 0.3s;
}

#write .md-task-list-item>input:hover {
    background: #d47405;
}

#write .md-task-list-item>input[checked]::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 50%;
    height: 60%;
    width: 2px;
    transform: rotate(40deg);
    background: var(--primary-color);
}

#write .md-task-list-item>input[checked]::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 25%;
    height: 30%;
    width: 2px;
    transform: rotate(-40deg);
    background: var(--primary-color);
}

#write .md-task-list-item>p {
    transition: color 0.3s;
}

#write .md-task-list-item.task-list-done>p {
    color: var(--primary-color);
    text-decoration: line-through;
}

.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container),
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) *,
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) ol,
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) ul {
    color: #499504ff !important;
}

#write .md-toc-item {
    color: var(--primary-btn-border-color);
}

#write .md-toc-h1 {
    font-size: 1.3rem;
}

#write .md-toc-h2 {
    font-size: 1.2rem;
}

#write h1::before,
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
    position: absolute;
    right: calc(100% + 10px);
    bottom: 0;
    color: #ddd6c1;
    font-size: 1rem;
    font-weight: bold;
    font-variant: "small-caps";
    border: 0;
    border-radius: 0;
    left: auto;
    float: none;
    padding: 0;
    vertical-align: baseline;
    line-height: 20px;
}

#write h1 {
    font-size: 1.8rem;
    margin: 1rem 0;
}

#write h1::before {
    content: "H1";
    bottom: 0.45rem;
}

#write h2 {
    font-size: 1.4rem;
    margin: 0.7rem 0;
}

#write h2::before {
    content: "H2";
    bottom: 0.2rem;
}

#write h3 {
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

#write h3::before {
    content: "H3";
    bottom: 0.18rem;
}

#write h4 {
    font-size: 1.1rem;
    margin: 0.2rem 0;
}

#write h4::before {
    content: "H4";
    bottom: 0.15rem;
}

#write h5,
#write h6 {
    font-size: 1rem;
    margin: 0;
}

#write h5::before,
#write h6::before {
    bottom: 0.1rem;
}

#write h5::before {
    content: "H5";
}

#write h6::before {
    content: "H6";
}

#outline-content li .outline-item-open>.outline-children {
    border-left: var(--primary-btn-border-color) 1px dashed;
}

/* diagrams like mermaid, sequence, gantt, flow etc */
#write .md-focus .md-diagram-panel {
    border-color: var(--table-border-color);
}

/* hover tooltip for formula etc */
.code-tooltip.md-hover-tip {
    color: var(--text-color);
    background-color: #e8dfc4ff;
}

.md-hover-tip .md-arrow:after {
    background: #e8dfc4ff;
}

/* for ``` code block */
.md-fences.md-focus .cm-s-inner .CodeMirror-activeline-background {
    background: #e8dfc470;
}

.cm-s-inner .cm-number {
    color: #9b3aff;
}

.cm-s-inner .cm-keyword {
    color: #577909;
    font-weight: bold;
}

.cm-s-inner .cm-def {
    color: #499504;
}

.cm-s-inner .cm-variable {
    color: #499504;
}

.cm-s-inner .cm-variable-2 {
    color: #05a;
}

.cm-s-inner .cm-variable-3 {
    color: #085;
}

.cm-s-inner .cm-property {
    color: #934b3cff;
}

.cm-s-inner .cm-operator {
    color: #577909;
    font-weight: bold;
}

.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
    color: #95a3abff;
}

.cm-s-inner .cm-string {
    color: #2aa198;
}

.cm-s-inner .cm-string-2 {
    color: #f50;
}

.cm-s-inner .cm-meta {
    color: #577909;
    font-weight: bold;
}

.cm-s-inner .cm-builtin {
    color: #9b3affff;
}

.cm-s-inner .cm-tag {
    color: #2369b6ff;
}

.cm-s-inner .cm-attribute {
    color: #cb2d01ff;
}

.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
    color: #0b6125ff;
    background-color: #bbbbbb30;
}

/* for win10 unibody, which lacks the sense of beauty, but tested */
#megamenu-menu-sidebar {
    color: #586e75;
    background-color: var(--side-bar-bg-color);
}

#megamenu-menu-sidebar .megamenu-menu-header {
    background-color: var(--primary-color);
}

#megamenu-back-btn {
    color: var(--primary-btn-text-color);
}

#megamenu-menu-header-title {
    color: var(--primary-color);
}

#megamenu-menu-list .li :hover {
    background-color: var(--item-hover-bg-color) !important;
}

#megamenu-menu-list .li>.active {
    color: var(--primary-color);
}

#megamenu-content {
    background-color: var(--bg-color);
}

/* source mode, for WIDE screen */
#typora-source .CodeMirror-lines {
    max-width: 128rem;
}
/*==背景高亮==*/
mark {
    background: #ffffff;
    color: #db3f1e;
    font-weight: bold;
    border-bottom: 0px solid #ffffff;
    padding: 0.0px;
    margin: 0 0px;
  }
  
::selection {
    background-color: #d1ff79;
}

3.pandoc的使用心得

建議就導出pdf或者html格式其它的格式不太好用

提供一個下載鏈接(鏈接：https://pan.baidu.com/s/1dkLaDhTbqbH19C9zz-vVfw 提取碼：73ai )

失效了請私信我會在博文中修改的直接雙擊自動安裝

之前我還整了一個批處理的，這里就暫時不發出來了，有需要的小伙伴私信

4.圖床的使用

之前談到圖片只是本地的，發給別人或者上傳就會失效，在這里推薦大家使用圖床（將圖片傳到網絡這樣就可以看到了）

先下載圖床（鏈接：https://pan.baidu.com/s/1VIFzA07os1-Fp03-wgvpnA 提取碼：gw7b ）

在網上注冊賬戶https://sm.ms/login 在user->dashboard->API TOKEN 初次需要生成並且復制（相當於圖床的身份憑證）

打開圖床

1.搜索並且安裝下面這個插件

2.在SMMS登錄用戶中粘貼剛才申請時復制的token

3.打開server 修改端口為36677（與typora的端口相匹配）

驗證是否操作成功可以打開配置文件查看token是否添加以及端口是否更改

這里需要特別特別指明一個問題：只要打開了picgo 叉掉並沒有將其關閉而是最小化了如果再直接打開軟件會自動更改為別的端口這時候端口只能再手動去改了（因此只要設置了就不要出現重復打開的情況設置會一直保留下去）

4.將以下兩個重命名設置打開（可每次自定義）避免某些圖片名字一樣上傳失敗只打開下面那一個也可以（名字隨機生成）

5.對typora進行配置，可選擇驗證看是否能夠上傳成功（不用點下載了第一步已經裝了）這里的路徑看你的圖床exe路徑在哪里

以下為轉載內容

PicGo配置Gitee圖床

一、PicGo介紹

PicGo: 一個用於快速上傳圖片並獲取圖片 URL 鏈接的工具

PicGo 本體支持如下圖床：

七牛圖床 v1.0
騰訊雲 COS v4\v5 版本 v1.1 & v1.5.0
又拍雲 v1.2.0
GitHub v1.5.0
SM.MS V2 v2.3.0-beta.0
阿里雲 OSS v1.6.0
Imgur v1.6.0
gitee v1.1.2（需要安裝插件）

二、版本說明

軟件名稱	版本號	地址
PicGO	version2.2.2	https://gitee.com/mirrors/PicGo?_from=gitee_search
Gitee	網頁	https://gitee.com/

三、插件下載

四、獲取Gitee令牌

1、登錄Gitee網站

2、進入設置頁面

3、點擊私人令牌

4、創建個人令牌

5、粘貼令牌的字符串

五、配置PicGo

repo：gitee倉庫的名稱，粘貼項目的地址。例如：https://gitee.com/xxx/xxx.git，將此處的https://gitee.com和后綴.git去掉，就是此處的內容。
branch：分支默認為master，當然此處不限制次，可以進行修改
token：此處需要填寫就是個人令牌的字符串
path：此處可隨意填寫，默認為當前項目的根目錄。作者這里寫的是當前日期，上傳圖片之后會上傳到這個文件夾下。(開發者並沒有意識到這個問題，可以獲取系統日期變更嗎？每天都要調整一下)
customPath：提交消息，這一項和下一項customURL都不用填。在提交到碼雲后，會顯示提交消息，插件默認提交的是 Upload 圖片名 by picGo - 時間

六、測試配置是否成功

這里通過軟件Typora的上傳進行測試，也可以通過PicGo自帶的測試。

將上傳服務選擇為PicGo(app)，並選擇PicGo的路徑。選擇驗證圖片上傳進行測試。

七、注意事項

1、在創建倉庫時，一定要選擇是公開的，不能是私有的，否則圖片上傳是成功的，但是無法展示圖片。

2、如果我們使用Typora去上傳圖片時，默認為端口號為36677，可能有時候PicGo會變更，需要調整PicGo端口號與Typora保持一致。

進入PicGo設置頁面，選擇設置Server，可以進行調整。

3、圖片最大支持2M是無需要密鑰的，否則圖片無法正常展示。

4、gitee單倉庫大小為1024MB，請酌情使用。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 記typora美化----讓文章更加優美 Typora 日記日記2 Typora Typora入門 typora 畫圖 Typora 簡介 Typora破解親子日記