自用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,分屏预览模式方便得很,是一个非常好的选择.不过这篇可不是 ...
随机推荐
- UV动画
[猫猫的Unity Shader之旅]之纹理映射 http://blog.csdn.net/dbtxdxy/article/details/46954417 [猫猫的Unity Shader之旅]之U ...
- ebay api接口开发基本步骤
因公司项目需求,要进行ebay api开发,网上很多资料已过时,自己记录一下. 准备工作 一.注册账号 1开发者账号注册 https://developer.ebay.com/signin?retur ...
- .gitignore过滤个人配置
git还是一个很好使用的版本工具.所以用eclipse做自己的小玩意儿,在多台电脑之间同步的时候我经常会使用它.. 但是有个问题..不同电脑的eclipse的个人配置稍微有那么一点点的不同..比如有几 ...
- [从产品角度学EXCEL 00]-为什么要关注EXCEL的本质
前言 Hello 大家好,我是尾巴,从今天开始,在这里连载<从产品角度学EXCEL>的系列文章.本文不接受无授权转载,如需转载,请先联系我,非常感谢. 与世面上的大部分EXCEL教程不同的 ...
- c/c++ long long 和__64int区别
在C/C++中,64为整型一直是一种没有确定规范的数据类型.现今主流的编译器中,对64为整型的支持也是标准不一,形态各异.一般来说,64位整型的定义方式有long long和__int64两种(VC还 ...
- c语言经典算法——猴子偷桃问题
题目:海滩上有一堆桃子,五只猴子来分.第一只猴子把这堆桃子凭据分为五份,多了一个,这只猴子把多的一个扔入海中,拿走了一份.第二只猴子把剩下的桃子又平均分成五份,又多了一个,它同样把多的一个扔入海中,拿 ...
- Linux 平台GCC使用小结
gcc -Wall [-I search_headfile_path] [-L search_lib_path] sourcefile -lNAME -o exe-name -Wall选项打开所有最常 ...
- IOS与Android APP界面设计规范要点
IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...
- synchronized使用说明
好久没有更新博客了,今天试着用简单的语言把synchronized的使用说清楚. synchronized是什么? synchronized是用来保证在多线程环境下代码同步执行的可重入的互斥锁.所谓互 ...
- css3渐变
background:-webkit-linear-gradient | radial-gradient (水平起点 垂直起点 , 颜色1 百分比%, 颜色2 百分比%, ... ,颜色N 100 ...