[铁人赛小工具] VSCode 编辑 Markdown (套用 iT 邦样式)

铁人赛要开始了，小弟今年应该是无缘参加了，
太晚準备资料加上手边还有专案再赶，只好明年再参赛，
今天要介绍在 Visual Studio Code 上写 Markdown，
小弟发现 VSCode 对 Markdown 的支援度很好，很适合用来赛前囤文章 XD
不知道各位铁人大大，準备文章时都是用什么编辑器来写 Markdown 呢。

1.安装 Markdown Shortcuts

2.安装 Markdown Preview Github Styling
先用 Github 的样式当底，之后会再加入其他样式模拟 iT邦 XD

左边为编辑画面，右边为预览画面

在编辑画面上方第二颗按钮，可以开启预览视窗，或快速键 Ctrl+K V。

在 iT邦编辑器上看到的功能按钮，可以在右键选单看到，其他没有的就只能自己打了。

预览视窗预设会连动编辑视窗跟着滚动，但我觉得他们跑来跑去好难操作，所以把功能关闭 XD

在左下角开启 VSCode 设定档，加入以下内容。

"markdown.preview.scrollPreviewWithEditorSelection": false,"markdown.preview.scrollEditorWithPreview": false

找了好久终于找到的 iT邦 程式语法高亮的 CSS
Github: highlight.js/src/styles/railscasts.css

3.在 VSCode 设定档加入自订的 markdown styles
新增 markdown.css 档案，将其路径加入设定档，档案可以放在任何地方网路上也可以。

"markdown.styles": [    "file:///C:/Users/aaa/.vscode/markdown.css"]

以下是我自己整理过的 css，将其複製贴上到 markdown.css 内。

.vscode-body {    max-width: 720px;    font-family: "Lato","PingFang TC", "Helvetica Neue", Helvetica, "Microsoft JhengHei", "新细明体", Arial, sans-serif;}.vscode-body code {    padding: 2px 4px;    font-size: 90%;    color: #c7254e;    background-color: #f9f2f4;    border-radius: 4px;}.vscode-body pre {    color: initial;    background: #232323 !important;}.vscode-body pre code {    color: #e6e1dc;}/*Copyright (c) 2006, Ivan SagalaevAll rights reserved.Redistribution and use in source and binary forms, with or withoutmodification, are permitted provided that the following conditions are met:    * Redistributions of source code must retain the above copyright      notice, this list of conditions and the following disclaimer.    * Redistributions in binary form must reproduce the above copyright      notice, this list of conditions and the following disclaimer in the      documentation and/or other materials provided with the distribution.    * Neither the name of highlight.js nor the names of its contributors       may be used to endorse or promote products derived from this software       without specific prior written permission.THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANYEXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIEDWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE AREDISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANYDIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED ANDON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THISSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.*//*Railscasts-like style (c) Visoft, Inc. (Damien White)*/.vscode-body .hljs {display:block;overflow-x:auto;padding:0.5em;background:#232323;color:#e6e1dc;}.vscode-body .hljs-comment,.vscode-body .hljs-quote {color:#bc9458;font-style:italic;}.vscode-body .hljs-keyword,.vscode-body .hljs-selector-tag {color:#c26230;}.vscode-body .hljs-string,.vscode-body .hljs-number,.vscode-body .hljs-regexp,.vscode-body .hljs-variable,.vscode-body .hljs-template-variable {color:#a5c261;}.vscode-body .hljs-subst {color:#519f50;}.vscode-body .hljs-tag,.vscode-body .hljs-name {color:#e8bf6a;}.vscode-body .hljs-type {color:#da4939;}.vscode-body .hljs-symbol,.vscode-body .hljs-bullet,.vscode-body .hljs-built_in,.vscode-body .hljs-builtin-name,.vscode-body .hljs-attr,.vscode-body .hljs-link {color:#6d9cbe;}.vscode-body .hljs-params {color:#d0d0ff;}.vscode-body .hljs-attribute {color:#cda869;}.vscode-body .hljs-meta {color:#9b859d;}.vscode-body .hljs-title,.vscode-body .hljs-section {color:#ffc66d;}.vscode-body .hljs-addition {background-color:#144212;color:#e6e1dc;display:inline-block;width:100%;}.vscode-body .hljs-deletion {background-color:#600;color:#e6e1dc;display:inline-block;width:100%;}.vscode-body .hljs-selector-class {color:#9b703f;}.vscode-body .hljs-selector-id {color:#8b98ab;}.vscode-body .hljs-emphasis {font-style:italic;}.vscode-body .hljs-strong {font-weight:bold;}.vscode-body .hljs-link {text-decoration:underline;}

找一篇旧文章对比一下
iT邦:

VSCode:

结语:
目前用起来功能还算齐全，比较不习惯的是，
iT邦编辑器只要 Enter 就可以换行，VSCode 却要 两个空白+Enter 才可以，
不过这不影响两边的显示，多用就会习惯。
研究替换样式的方法花了好多时间，不过最后还是成功了。

2018/9/7 更新:

自从某次更新 VSCode 发现读取不到 markdown.css 后，就一直用旧版本不敢更新，最近找到问题了。

https://github.com/Microsoft/vscode/issues/45260

文中提到考虑安全性，所以限制 VSCode 只能存取当前工作区内的资源。

解决办法:

我使用第三个方法。

"markdown.styles": [    "markdown.css"]

终于可以安心更新到最新版了。

参考文章:
Markdown and VS Code