使用 VSCode 简化您的 DEV.to 写作工作流程
你好，同为开发者的发行商！👋
✅ 你的开发日志文章全部或部分是用文本编辑器撰写的吗？
✅ 你是否经常将工作进度复制粘贴到开发草稿中，然后预览以查看进度？
✅ 或者您是否直接在开发者编辑器中撰写所有文章，但希望看到并排的实时预览？
你一天要按几次这个按钮？💯
你猜怎么着？！
只需在 VSCode 中添加一个扩展程序和几行 CSS 代码，即可简化您的 DEV 编写工作流程！
看看这个👇
以下是入门步骤……
- 下载VSCode（如果您尚未使用它）
- 安装Markdown 预览增强版
- 在 VSCode 中，按下
ctrl+shift+p- 或F1- 键，然后开始输入custom css
Markdown Preview Enhanced: Customize CSS看到选项时选择它。这将打开一个名为“.”的文件style.less。（你没听错……）
- 复制以下代码并粘贴
style.less到此处保存
.markdown-preview.markdown-preview {
font-family: Palatino Linotype;
font-size: 21px;
line-height: 32px;
color: #0a0a0a;
}
.markdown-preview.markdown-preview p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.markdown-preview.markdown-preview h2 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.7em;
font-weight: 400;
line-height: 1.14em;
}
.markdown-preview.markdown-preview h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.32em;
font-weight: 400;
}
.markdown-preview.markdown-preview img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: calc(100% + 12px);
}
.markdown-preview.markdown-preview li {
margin: 0.3em auto;
}
.markdown-preview.markdown-preview blockquote {
margin: 0.95em 0 0.95em;
font-size: 0.92em;
line-height: 1.4em;
color: #29292e;
background: #fff;
padding: 0.1% 6% 0.1% 4%;
}
.markdown-preview.markdown-preview code {
color: #f92671;
background: #f9f9fa;
padding: 0.1em 0.3em 0;
font-size: 0.84em;
line-height: 1.6em;
}
.markdown-preview.markdown-preview pre {
background: #29292e;
color: #eff0f9;
font-size: 0.64em !important;
}
- 打开一个 Markdown 文件，然后点击新的“增强型 Markdown 预览”或快捷键
ctrl+k v打开预览，欣赏你的杰作吧！
- 最后，也是最重要的一点，尽情地写下你的心声吧！
额外物品
这两种字体都是Windows系统自带的。我不确定其他操作系统是否也有，但如果购买超出您的预算，我相信您能找到替代方案。
有些功能我没能找到复现方法（主要是代码预览和引用块的间距）。不过，至少你可以先写好大部分内容，然后再将其导出为开发草稿并进行预览——希望这能帮你节省一些时间和精力。
如果各位有什么建议或改进方法可以提升 Markdown 预览效果，请在下方留言。尤其欢迎 CSS 高手指点，特别是如果有人知道如何让代码块的样式保持一致就更好了。:D
Twitch上的实时编程
如果您对本文、代码、VSCode 有任何疑问，或者只是想和同好们聊聊天——欢迎在直播期间过来打个招呼！我每周二、周四和周六晚上 7 点（太平洋标准时间）都会直播 Python 的各种趣事和冷笑话™ 。
💜在Twitch上关注我
*欲了解最新日程安排，请查看我在推特上的置顶帖子。
文章来源：https://dev.to/bun9000/dev-post-simulator-live-markdown-previews-in-vscode-2oki