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删除。

猜您在找 日记日记2 Typora 「日记」时光. android日记（一） Typora 的使用 Typora基本语法 eclipse美化 KDE美化 Winform 美化