首页 > 其他分享 >修改typora代码块颜色,稍微美化Github主题

修改typora代码块颜色,稍微美化Github主题

时间:2023-04-20 17:35:27浏览次数:39  
标签:Github cm color typora inner background CodeMirror 美化 255

typora的GitHub主题是默认主题,也是最符合我的审美的主题。但是仍然有几个小地方不能让我满意:

  • 一级标题和二级标题不够明显
  • 代码块是白色背景,不好看

于是基于官网给的部分代码做了,做了一点小的修改,最终效果如下

display

操作过程如下:

1. 打开Theme文件夹


2. 修改为深色代码框

github.css尾部加上以下代码:

/** ported from https://codemirror.net/theme/material.css **/
/*

    Name:       material
    Author:     Michael Kaminsky (http://github.com/mkaminsky11)

    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)

*/

/* .cm-s-inner {
    background-color: #263238;
    color: rgba(233, 237, 237, 1);
  } */
  .cm-s-inner .CodeMirror-gutters {
    background: #263238;
    color: rgb(83,127,126);
    border: none;
  }
  .cm-s-inner .CodeMirror-guttermarker, .cm-s-inner .CodeMirror-guttermarker-subtle, .cm-s-inner .CodeMirror-linenumber { color: rgb(83,127,126); }
  .cm-s-inner .CodeMirror-cursor { border-left: 2px solid #02a813 !important; }
  .cm-s-inner div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
  .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
  .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
  .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
  
  .cm-s-inner .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
  .cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1); }
  .cm-s-inner .cm-operator { color: rgba(233, 237, 237, 1); }
  .cm-s-inner .cm-variable-2 { color: #80CBC4; }
  .cm-s-inner .cm-variable-3 { color: #82B1FF; }
  .cm-s-inner .cm-builtin { color: #DECB6B; }
  .cm-s-inner .cm-atom { color: #F77669; }
  .cm-s-inner .cm-number { color: #F77669; }
  .cm-s-inner .cm-def { color: rgba(233, 237, 237, 1); }
  .cm-s-inner .cm-string { color: #C3E88D; }
  .cm-s-inner .cm-string-2 { color: #80CBC4; }
  .cm-s-inner .cm-comment { color: #546E7A; }
  .cm-s-inner .cm-variable { color: #82B1FF; }
  .cm-s-inner .cm-tag { color: #80CBC4; }
  .cm-s-inner .cm-meta { color: #80CBC4; }
  .cm-s-inner .cm-attribute { color: #FFCB6B; }
  .cm-s-inner .cm-property { color: #80CBAE; }
  .cm-s-inner .cm-qualifier { color: #DECB6B; }
  .cm-s-inner .cm-variable-3 { color: #DECB6B; }
  .cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1); }
  .cm-s-inner .cm-error {
    color: rgba(255, 255, 255, 1.0);
    background-color: #EC5F67;
  }
  .cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
  }
  
  /**apply to code fences with plan text**/
  .md-fences {
    background-color: #263238;
    color: rgba(233, 237, 237, 1);
    border: none;
  }
  
  .md-fences .code-tooltip {
    background-color: #263238;
  }

3. 改code block为灰色背景

将以下代码加到上一部分代码的前面,或者直接替换原文件中的#write code{}(如果有的话):

#write code {
    border-radius: 4px;
    margin-left: 2px;
    margin-right: 2px;
    background-color: #bdc3c7;
    word-spacing: normal;
    line-height: 1.6;
    padding: 0 2px;
    /* color: #f9f9f5; */
  }

4. 修改标题颜色和blockquote颜色

github.css文件中分别找到下面这些元素,并替代:

h1 {
    color: #eb6307;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 3px double #e36a14;
}
h2 {
    color: #e69422;
    font-size: 2em;
    line-height: 1.225;
    border-bottom: 2px solid #dc7216;
}
h3 {
    color: #8e44ad;
    font-size: 1.5em;
    line-height: 1.43;
}
h4 {
    color: #2980b9;
    font-size: 1.25em;
}
blockquote {
    border-left: 4px solid #2980b9;
    border-radius: 0.5em;
    padding: 0 15px;
    color: white;
    background-color: #055083;
}

标签:Github,cm,color,typora,inner,background,CodeMirror,美化,255
From: https://www.cnblogs.com/yang-ding/p/17337555.html

相关文章

  • VSCode,轻松提交文件到GitHub
    方法如下:在GitHub创建一个仓库来存放你的项目;2.在本地文件夹(可以是空文件夹,也可以是非空)内右键-GitBashHere进入命令行;3.输入如下命令,会看到一个名字为.git的隐藏文件,这说明该文件夹已经成为受控制的文件夹了;gitinit4.依次输入如下命令,将本地文件夹与远程仓库建立链接......
  • 20个Github 网页常用操作教程
    20个Github网页常用操作教程创建仓库上传文件发布版本创建分支提交代码发起合并请求参与项目编辑文件添加贡献者查看提交历史查看问题(Issue)创建问题查看PullRequest添加标签查看分支查看贡献者重命名文件回退提交(UndoCommit)搜索代码查看贡献者活动......
  • Theme——借助github的API来实现主题自动更新
    前言那么借助的是那个api呢?这里是为了方便测试,使用的是tags,如果是正式的那么应该使用releases,这个后面会直接接入主题;内容侧边公告栏<script>asyncfunctionrequest(url='',method='GET',data={},headers={}){letoptions={method:method,......
  • Typora 1.5.12 (windows/MacOs版) 简单高效且实用的Markdown编辑器
    简介Typora的设计理念非常人性化,与传统编辑器相比,更注重用户的视觉效果和阅读体验。它的编辑界面非常简洁,用户可以就近编辑,随时查看效果,避免频繁地转换预览模式,提高了工作效率和灵活性。此外,Typora软件还提供了诸如内置思维导图、目录和常用快捷键等便捷功能,可以让用户在编辑的......
  • How to fix use the cURL to connect to GitHub with a 443 HTTPS error All In One
    HowtofixusethecURLtoconnecttoGitHubwitha443HTTPSerrorAllInOne#nvm$curl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh|bashhttps://github.com/nvm-sh/nvm#installing-and-updatingerrorscurl:(7)Failedtoconnec......
  • 关于上周测试内容的修正以及相关美化
    改正一表格长度过长的话,将超过规定长度的部分用省略号代替使用css样式就能解决啦!td{white-space:nowrap;/*控制单行显示*/overflow:hidden;/*超出隐藏*/text-overflow:ellipsis;/*隐藏的字符用省略号表示*/}改正二将鼠标移动到政策名称上......
  • 通过github搭建简单的网站
    正常搭建个网站可能需要服务器和域名,但是有没有不花钱的方法呢,github可以。首先新建个工程,名称随意然后新建个index.html文件做为首页之后点击设定最下面有个GitHubPages选择选择下面的内容,你的网站地址就会生成出来了打开网址https://huyunan.github.io/haha/ ......
  • gitee github 左侧栏树形显示插件 Octotree codetree 浏览器插件
    起因看到一位仁兄用gitee做仓库https://gitee.com/zhengqingya/java-developer-document然后左侧栏挺方便(抖音视频)下载chrome扩展市场搜octotree用于githubcodetree用于gitee双核浏览器扩展市场搜octotree用于githubgitcodetree用于gitee......
  • 博客园SimpleMemory美化搬运工教程
    这不是我写的代码,但是,我是负责把写代码的大佬的代码分享出来。接下来,就开始吧。1.开通博客权限。点击左上角头像,然后点击左上角我的博客,如果你没有开通博客,它会让你开通,这个你只需要申请,因为是人工审核,耐心等几十分钟至几小时不等就可以被批准,开通理由随便写点正当的什么......
  • git+github使用记录
    本文跟进尚硅谷的git教程。1.git遵循原则:没有提示就是最好的提示[doge]2.git的几个基本概念:工作区 暂存区本地库远程仓库工作区即为代码存在的位置。暂存区即为进行gitadd后代码更新到的位置。工作区和暂存区的代码内容均可更改删除。本地库即为进行git......