022-笔记模板2.0---Obsidian适用
1. markdown语法
- 详细教程
- 不一样的几个点
- 注释不一样
- 双链，即双重方括号
- 图片可以通过
|数字调整大小
2. 图片
- 图片一直是markdown最麻烦的地方，它不仅得实时预览，格式还要美观，比如最基础的居中，缩放，甚至圆角，并排显示等
- 同时还要兼具简洁性，为了达到美观性而写一大堆
html和css代码，是不划算的，因为在写作中插入图片不应该长时间打断写作，最多三秒，截图（复制）->粘贴->缩放（滑动鼠标滚轮），复制的是本地图片，而下一秒粘贴的应该是该图片上传到图床后的链接，然后随手调整大小（居中是自动完成的） - 上述用到的一些技术：
- 视频教程
- 缩放：这里引用了插件Mousewheel Image zoom，按住
option+鼠标滚轮可以调整图片大小，包括前文提到的|后面的数字大小也会同步改变
- 示例代码如下(推荐)：
- 使用html：
<div style="text-align: left;">
<img style="border-radius: 0.34em; border: none; box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);
width:49%; display: block; margin: 0;"
src="https://img.codertoro.top/Bucket/img/material/016-%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5%E6%90%AD%E5%BB%BA/iShot_2023-05-12_17.11.55.jpg">
</div>
<div style="text-align: left;display:flex;">
<img style="border-radius: 0.34em; border: none; box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);
width:50%; display: block; margin: 0;"
src="https://img.codertoro.top/Bucket/img/material/016-%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5%E6%90%AD%E5%BB%BA/iShot_2023-05-12_17.20.22.jpg">
<img style="border-radius: 0.34em; border: none; box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);
width:50%; display: block; margin: 0;"
src="https://img.codertoro.top/Bucket/img/material/016-%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5%E6%90%AD%E5%BB%BA/iShot_2023-05-12_17.22.11.jpg">
</div>
3. 视频
3.1. 注意事项
- Markdown没有对视频原生支持，只能采用简短的html语言
- 非必要不引用非oss视频，如必须引用，可将其下载到oss中再引用，防止资料丢失
- 不重要的视频引用直接放超链接即可，避免文章排版
3.2. 图床视频
示例代码：
<video style="width: 50%; max-width: 600px; height: auto; display: block; margin: auto;" controls playsinline>
<source src="https://img.codertoro.top/Bucket/img/daily/2023/02/video_20230226%E6%BB%A8%E6%B5%B7%E5%85%AC%E5%9B%AD.mp4">
</video>
3.3. 流媒体视频
示例代码：
<div style="width: 90%; margin: 0 auto; position: relative; aspect-ratio: 16 / 9; background: black;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;"
src="http://player.bilibili.com/player.html?aid=20190823&bvid=BV1yW411s7og&cid=32964980&page=1&autoplay=0"
scrolling="no"
frameborder="0"
allowfullscreen="true"
title="Bilibili Video Player">
</iframe>
</div>