VS code配置markdown遇到的问题总结：图片自动同步、修改字体颜色、PPT制作

问题1：自动上传剪切板上的图片到qiniu云的一种解决方案

要求

• 使用VS code编辑 markdown文件；
• 插入图片非常方便：
  • 可使用QQ/微信截图 + Ctrl V粘贴到VS code
  • 且自动上传到可访问的云中，并返回图片链接形式
• 能够方便地导出pdf
• 能够方便使用快捷键 – 加粗、斜体、标题等

解决方案

• Markdown Image插件：支持直接粘贴图片到VS code中，并上传到指定的平台
  • 如本地、qiniu、ithub等
  • 可自定义图片粘贴快捷键，如修改为ctrl V
  • 参考链接
• 七牛 qiniu 云对象存储，用于存储和访问粘贴的图片
  • 为了长时间工作，需要自定义域名
  • 使用了阿里云的二级域名
    • 备案较方便
    • 配置方法：参考七牛云配置二级域名，从而避免七牛云30天自动更改域名的问题
• Markdown Preview Enhanced插件：预览页面直接右键选择chrome-pdf即可导出pdf文件；
  • 需安装prince(https://www.princexml.com/download/)并添加到环境变量，以导出有书签的pdf
• Markdown All in One插件：实现快捷键

=============== 更新: 出现了新的问题 ============

新的问题: 没有本地备份

• gitee今天崩了，不得不防范qiniu出现意外
• 此外，qiniu只有10G的免费空间，不得不为10G以后做打算。

新的解决方案

• 在上传到qiniu的同时保存一份到本地；
• 本地通过git私有仓库持续备份。
• 但Markdown image工具保存到本地较为麻烦，于是选择了新的工具：markdown image upload and insert
  • 实现了本地保存、qiniu同步的功能；
  • 但还是有问题：
    • markdown image upload and insert的图片命名方式不再是Hash码，而是一串较短的数字，碰撞变的更加容易；
    • 而且该拓展不支持分目录上传到qiniu，加重了碰撞的概率；
    • 解决方法：在setting中使用${fileName}----${mdFileName}的命名方式
      • 以1648282226945----cryptographyI.png为例，其在本地./img目录下的命名为1648282226945.png.在qiniu上的命名为1648282226945----cryptographyI.png，在md中的代码为```````
      • 这样，如果哪天qiniu出现了意外，只需要利用正则表达式----\w+将所有md中的图片名统一替换，即可完成本地的备份和修改，从而方便地使用新的图床。

总结

根据上述方案，最终实现了剪切板图片qiniu上传 + 本地复制、文件名防碰撞、防qiniu崩溃的VS code markdown开发环境配置。

问题2：找不到更改文字颜色的快捷键

问题描述：

有时候想使用不同颜色的文字以完成highlight。但markdown相关的extensions中没能找到修改字体颜色的快捷键。手动修改颜色<font color=red>text</font> 又很麻烦。

解决方案：手动添加snippets

于是手动在vs code中添加snippets：

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"Change the text color to red": {
		// "scope": "",
		"prefix": "redcolor",
		"body": [
			"<font color=red>$1</font>"
		],
		"description": "color red"
	},
	"Change the text color to blue": {
		// "scope": "",
		"prefix": "bluecolor",
		"body": [
			"<font color=blue>$1</font>"
		],
		"description": "color blue"
	},
	"Change the text color to green": {
		// "scope": "",
		"prefix": "greencolor",
		"body": [
			"<font color=green>$1</font>"
		],
		"description": "color green"
	}
}

由于vs code默认不支持markdown的智能提示，于是需要在setting.json中添加如下代码：

    "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": true
    },

这样，输入redcolor时会自动补全：

问题3 PPT制作

• 使用Marp插件
• 关键在于自定义合适的模板
  • 例如适用于周报、答辩的css PPT模板
• 一个很好的例子：
  • https://github.com/BeWaterMyFriend7/Marp-Theme-UCAS

问题 3.1 目录添加

可使用markdown Toc 插件完成目录添加
并将 <a name= 统一替换为 <a id=

• 若Markdown all in One 添加目录可能会出现链接无效的问题

问题 3.2 如何将模板托管到OSS

• 使用github托管css文件无法成功，原因不明
• 之后使用阿里云托管成功；

问题 3.4 如何使用双列

官方Discussion中给出的solution为：
https://github.com/marp-team/marp/discussions/192#discussioncomment-1516155
确实有效

可通过snippets自定义代码补全，从而简化双列page的代码量

问题3.5 图片操作汇总

官方介绍: https://marpit.marp.app/image-syntax

• 设置图片大小

![width:200px](image.jpg) <!-- Setting width to 200px -->
![height:30cm](image.jpg) <!-- Setting height to 300px -->
![width:200px height:30cm](image.jpg) <!-- Setting both lengths -->