自用VS Code 上的Markdown 编辑器css
目标效果如下:

主题使用:Markdown Yellow 主题【https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme-MarkdownKit】
使用方法:F1 呼出命令栏 输入
Install Extension
回车
然后输入
Markdown Theme

点击下面的插件即可安装 随后重启vs code
随后转到 \Program Files (x86)\Microsoft VS Code\resources\app\out\vs\languages\markdown\common 目录
编辑目录内的 markdown.css 文件
主要修改内容是为了适配大块文字的阅读以及中文字体的需求
font-family: "Source Sans Pro", "思源黑体 CN", HelveticaNeueLTPro-Lt, Arial, sans-serif;
这里是我个人的适配(请从个人电脑内选自自己所需要的字体!)
完整配置如下:
@charset "ust-8";
h1, h2, h3, h4, h5, h6, p, blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Source Sans Pro", "思源黑体 CN", HelveticaNeueLTPro-Lt, Arial, sans-serif;
padding: 1em;
margin: auto;
max-width: 42em;
color: #737373;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td, th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th { padding: 5px 10px; }
a { color: #0069d6; }
a:hover {
color: #0050a3;
text-decoration: none;
}
a img { border: none; }
p { margin-bottom: 9px; }
h1, h2, h3, h4, h5, h6 {
color: #404040;
line-height: 36px;
}
h1 { margin-bottom: 18px; font-size: 38px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote{
color:#666666;
margin:0;
padding-left: 3em;
border-left: 0.5em #EEE solid;
font-family: "HelveticalNeueLT Pro 43", georgia, PingFang SC;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
}
code {
background-color: #ffffe0;
border: 1px solid orange;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
background-color: #f8f8f8;
border: 1px solid #2f6fab;
border-radius: 3px;
overflow: auto;
padding: 14px;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: inherit;
border: none;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin: 10px auto;
}
}
@media print {
body, code, pre code, h1, h2, h3, h4, h5, h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
相关文档:https://code.visualstudio.com/Docs/languages/markdown
自用VS Code 上的Markdown 编辑器css的更多相关文章
- Markdown编辑器开发记录(一):开发的初衷和初期踩的坑
先说下选择Markdown编辑器的原因,我们进行平台开发,需要很多的操作手册和API文档,要在网站中展示出来就需要是HTML格式的文件,但是由于内容很多,不可能全部由技术人员进行文档的编写,如果是只有 ...
- markdown编辑器typora本地图片上传到自己的服务器
typora是windows平台下最受欢迎的markdown书写工具和查看工具,本篇文章将会介绍如何在typora平台使用java脚本程序自动上传本地图片到自己的服务器,从而让markdown文章中的 ...
- Markdown编辑器语法指南2
人的一切痛苦, 本质上都是对自己的无能的愤怒. --王小波 1 Markdown编辑器的基本用法 1.1 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` ...
- 打造自己的Markdown编辑器
原文链接: http://www.errdev.com/post/5/ Markdown以其简洁的语法赢得了广大程序猿的喜爱,搜了一下github上相关的web编辑器,星星比较多的 Stackedi ...
- Markdown编辑器editor.md的使用---markdown上传图片
http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...
- Vue实现一个MarkDown编辑器
Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大 ...
- 10分钟实现Typora(markdown)编辑器
本章主要内容: 介绍我们将在接下来的几章中构建的应用程序 配置我们的CSS样式表,使其看起来更像一个本机应用程序 回顾在Electron中主进程和渲染器进程之间的关系 为我们的主进程和渲染器进程实现基 ...
- Typora 精美而强大的Markdown编辑器
Typora 精美而强大的Markdown编辑器 转 https://www.jianshu.com/p/45e284645d30 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有 ...
- Typora 精美而强大的Markdown编辑器 转
Typora 精美而强大的Markdown编辑器 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有几个了.之前一直在用Mou,分屏预览模式方便得很,是一个非常好的选择.不过这篇可不是 ...
随机推荐
- jquery 杂记
返回指定属性名的属性值:getAttribute() 设置元素的属性值:attr('src',voiceurl) form表单: 序列化表单值: $('#formid').serialize() ...
- js 也来 - 【拉勾专场】抛弃简历!让代码说话!
前些日子谢亮兄弟丢了一个链接在群里,我当时看了下,觉得这种装逼题目没什么意思,因为每种语言都有不同的实现方法,你怎么能说你的方法一定比其他语言的好,所以要好的思路 + 好的语言特性运用才能让代码升华. ...
- nginx+Memcached 缓存设计
单页面缓存方案 单静态页缓存 解决问题场景 常见的缓存设计利用System.Web.Cache 保存在内存内,效率高,可以减轻数据库访问的压力.但是Web除了获取数据之外,还有呈现页面渲染,生成HTM ...
- Visual Studio EventHandler Delegate 和 EventArgs
EventHandler代理 用来表示处理一个没有事件数据(event data)的事件(event)的 方法. 无论何时事件发生时,事件代理就被调用来触发以前事件驱动的其他事件(监听当前事件TCur ...
- Java性能调优之:idea变慢解决
今天搬砖的时候遇到一个问题,idea总是卡死,完全无法愉快的玩耍.幸好机器是Linux系统的.于是通过以下方式解决了问题: 通过top命令,查看系统运行状态发现4个CPU中有1个CPU用户占用率为10 ...
- BZOJ 3527: [Zjoi2014]力
Description 求 \(E_i=\sum _{j=0}^{i-1} \frac {q_j} {(i-j)^2}-\sum _{j=i+1}^{n-1} \frac{q_j} {(i-j)^2} ...
- python 输出大文本文件
输出固定函数 >>> with open(r'd:\test.txt','r') as f: for i , v in enumerate(f): if i>10: break ...
- 【JavaScript】JS 中 原始字符串 和 HTML 字符转换
参考资料:http://www.sjyhome.com/javascript/js-html-escape.html JS转换HTML转义符 SJY • 发表于:2013年10月05日 17:04 • ...
- Mac 安装配置rz、sz
在Iterm2中修改配置: 安装lrzsz brew install lrzsz 下载iterm2-zmodem cd /usr/local/bin sudo wget https://raw.git ...
- Python语言常见异常错误类型
在运行或编写一个程序时常会遇到错误异常,这时python会给你一个错误提示类名,告诉出现了什么样的问题(Python是面向对象语言,所以程序抛出的异常也是类).能很好的理解这些错误提示类名所代表的意思 ...