目标效果如下:       

         

主题使用: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的更多相关文章

  1. Markdown编辑器开发记录(一):开发的初衷和初期踩的坑

    先说下选择Markdown编辑器的原因,我们进行平台开发,需要很多的操作手册和API文档,要在网站中展示出来就需要是HTML格式的文件,但是由于内容很多,不可能全部由技术人员进行文档的编写,如果是只有 ...

  2. markdown编辑器typora本地图片上传到自己的服务器

    typora是windows平台下最受欢迎的markdown书写工具和查看工具,本篇文章将会介绍如何在typora平台使用java脚本程序自动上传本地图片到自己的服务器,从而让markdown文章中的 ...

  3. Markdown编辑器语法指南2

    人的一切痛苦, 本质上都是对自己的无能的愤怒. --王小波 1 Markdown编辑器的基本用法 1.1 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` ...

  4. 打造自己的Markdown编辑器

    原文链接:  http://www.errdev.com/post/5/ Markdown以其简洁的语法赢得了广大程序猿的喜爱,搜了一下github上相关的web编辑器,星星比较多的 Stackedi ...

  5. Markdown编辑器editor.md的使用---markdown上传图片

    http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...

  6. Vue实现一个MarkDown编辑器

    Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大 ...

  7. 10分钟实现Typora(markdown)编辑器

    本章主要内容: 介绍我们将在接下来的几章中构建的应用程序 配置我们的CSS样式表,使其看起来更像一个本机应用程序 回顾在Electron中主进程和渲染器进程之间的关系 为我们的主进程和渲染器进程实现基 ...

  8. Typora 精美而强大的Markdown编辑器

    Typora 精美而强大的Markdown编辑器  转 https://www.jianshu.com/p/45e284645d30 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有 ...

  9. Typora 精美而强大的Markdown编辑器 转

    Typora 精美而强大的Markdown编辑器 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有几个了.之前一直在用Mou,分屏预览模式方便得很,是一个非常好的选择.不过这篇可不是 ...

随机推荐

  1. InputStream、InputStreamReader和Reader的关系

    InputStream:得到的是字节输入流,InputStream.read("filename")之后,得到字节流 Reader:读取的是字符流 InputStreamReade ...

  2. UnicodeEncodeError: 'ascii' codec can't encode characters in position 820-823: ordinal not in range(128)

    真是奇怪了,在itermi里 print(data) 就能直接运行,而在sublime里,就非得写成这样 print(data.encode('utf-8'))

  3. Linux常用命令和Shell编程基础

    目录相关 cd - .与.. 分别表示当前目录和父目录 - ~与$HOME 都是指当前用户的主目录 - cd – 切换到上一次所在的目录(不一定是父目录) pwd - pwd 显示当前目录 - $PW ...

  4. SQL拼接自己需要的字符串

    SQL行转列有多种写法,如果想把多行数据拼接成为新的一行,比如: 首先,将查询转为XML 替换XML的标签 将第一个字符,去掉试用 STUFF函数 sql STUFF用法 1.作用 删除指定长度的字符 ...

  5. 分析oracle的执行计划(explain plan)并对对sql进行优化实践

    基于oracle的应用系统很多性能问题,是由应用系统sql性能低劣引起的,所以,sql的性能优化很重要,分析与优化sql的性能我们一般通过查看该sql的执行计划,本文就如何看懂执行计划,以及如何通过分 ...

  6. jQuery EasyUI Combobox 无法获取属性 options 的值: 对象为 null 或未定义

    错误的写法: $('#combobox1').combobox({ valueField: 'id', textField: 'text',data:[{id:1,text:'蚂蚁小羊'}]}); 正 ...

  7. ASP.NET中Ajax的用法

    在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...

  8. mySQL 中主键值自动增加

    转  http://stevenjohn.iteye.com/blog/976397 MySql 主键自动增长 博客分类: DataBase MySQLSQL  创建数据库,创建表. mysql> ...

  9. 详解Node解析URL网址

    前提给大家声明一下,我操作的环境是Mac终端下操作的.(前提是你先要下载好node.js) 说道URL 恐怕都不陌生,但是要说URL,就 必须先说下URI URI是统一资源标识符,是一个用于标识某一互 ...

  10. 安装和卸载windows服务 bat

    1. 安装 windows服务 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\installutil    [服务路径](例:C:\\test\myt ...