网站建设管理情况,现在做个企业网站一般多少钱,国家优质校建设网站,切实加强网站建设Markdown的一些杂谈
目录
Markdown的一些杂谈 前言
准备工作
认识.Md文件
为什么使用Md#xff1f;
怎么使用Md#xff1f;
编辑
怎么看别人给我的Md文件#xff1f;
Md文件命令
切换模式
粗体、倾斜、下划线、删除线和荧光标记
分级标题
水平线
引用
无序…Markdown的一些杂谈
目录
Markdown的一些杂谈 前言
准备工作
认识.Md文件
为什么使用Md
怎么使用Md
编辑
怎么看别人给我的Md文件
Md文件命令
切换模式
粗体、倾斜、下划线、删除线和荧光标记
分级标题
水平线
引用
无序和有序列表
编辑
任务清单
插入链接和图片
内嵌代码和代码块
表格
公式
其他
源代码
预告和回顾
后话 前言
本篇博客将围绕一种常用的文件——Markdown文件来写。由于Markdown以一种类似代码的形式来格式化文本内容因此可以较为方便地调整你的笔记让它看上去更加美观一些。
对于Markdown的使用笔者其实也才刚刚入门所以如果有写的不对的地方多多包涵。
准备工作
软件【参考版本】有道云笔记
官网下载地址https://note.youdao.com/*当然使用Markdown的官方软件也是可以的但是毕竟是国外的软件下载和使用不太方便感兴趣的朋友可以自行了解*
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
认识.Md文件
.md是Markdown文件的标准存储格式如果之前有VS code的使用经历的话系统应该默认会使用VS code打开这类文件。
VS code真的很强大扩展很多很多文件都可以使用VS code打开。
在VS code的解析下.md文件应该长这个样子 *我们待会儿需要使用有道云笔记编辑这类文件没有VS的朋友也不用着急*
为什么使用Md
先举个例子吧现在我们有一段这样的示例文本
大标题 小标题1 内容1
小标题2 内容2
小标题3 package 某个包
System.out.println(某段示例代码);
这段示例文本由以下四种类型的笔记组成
一级标题二级标题普通文本内容示例代码这里是一段java代码
在文本文档中我们只能做到以下的效果 可以看到无论是示例的四种文本中的哪一种文本文档中显示的内容格式都是完全相同的没有层次感和优雅的格式。
这时可能会有朋友说可以用Word来实现示例笔记的效果 其实说的也没错……
但是我们学前端的一定绕不开一个名词超文本标记语言HyperText Mark Language, HTML 关于HTML的相关知识我在其他的博客会讲现在只需要知晓这个名词。
而Markdown也是一种轻量级的、可由纯文本格式编辑的标记语言。
最主要的是它可以轻松地转化成HTML语言而且很多HTML的效果可以直接像在浏览器中的一样在Md文件中展示出来。
这是因为Md可以直接解释HTML的代码在网页上呈现笔记的效果。
另外它也可以转化为常见的wordpdf等文件。
目前市面上流行的很多写作语言都是基于Markdown来写的包括CSDNGithub等论坛。
所以对于开发者而言掌握Markdown的基本使用是相当重要的。
我们的示例文字使用Markdown文件呈现出来的效果是这样的 是不是有点博客的味道了 就作为笔记而言这样看起来也更加优雅了。
怎么使用Md
如果是和博主一样使用有道云笔记在左侧边栏里按照“全部笔记”-“我的资源”的顺序打开。相对位置如下 *web学习是我自己的文件夹哈*
右键点击我的资源按照“我的资源”-“新建”-“Markdown”的顺序创建一个新的Md文件 下面其实就可以开始编辑了 但是要确保你在右上角的这个位置选择了“所见即所得”这个模式。 接下来的用法就和Word和CSDN博客的编写差不多了直接选文本格式调成自己喜欢的样子就可以了。 在内容编辑完成之后回到左侧侧边栏右键你的Md文件选择下载即可。 初次使用有道云笔记的朋友需要注意如果不下载你的文件是保存在云端的。
如果从本地直接拖一个文件夹进来编辑Md文件当然是可以的但是结果是不会自动同步到本地的哈。
怎么看别人给我的Md文件
现在不少开发者都会使用Md文档来记录东西就比如说我学习前端的这里教学编程的老师也喜欢使用Md文件来整理笔记。
这些笔记常常会和代码文件放在一起。如果你在编译器比如VS code或HbuilderX里查看代码的时候想顺带喽一眼笔记的内容打开可能是下面这个场面 这个效果显然是不太好的如果每一篇博文或者说笔记都长这个样子着实有点难受了。
那么如何正确地查看Md文件呢
打开有道云笔记左键单击“我的资源”或者新建一个文件夹或者直接从本地拖一个文件夹/复制一个文件夹可以看到这样一个界面。 直接将目标Md文件从你的资源管理器中拖动到右侧空白区域即可。 这个时候再单击打开查看Md文件就可以看到格式排版正确的Md文件了。 *这些HTML的笔记我会在整理完之后分几篇专门的博客来发有需要的可以期待一下*
Md文件命令
可能很多人看到“标记语言”这种说法会认为Markdown就是像HTML或者XML那样需要掌握诸如“标签”、“元数据”等等大量代码有关的东西。
对此我会说的确但是其实并没有想象中那么艰难。
首先就拿有道云笔记来说即使什么命令都不知道也可以像正常记笔记、写博客一样编辑Md文件。
其次就算学基本的Md命令也并不是很多。下面我将分享如何学习Md命令。
切换模式
新建一个Markdown文件在刚刚设置“所见即所得”的地方将模式切换为分屏编辑 此时左侧的黑色区域就是像VS code一样用来编写代码的地方右侧则为效果的预览。
特别的左边区域的主题颜色是可以调整的点击右上角那个像衣服一样的图标选一个自己喜欢的颜色即可。我的是tomorrow_night_eighties仅供参考。 看到最上面的工具栏了吗我们依次来看每一个选项对应的效果和代码从左至右。 粗体、倾斜、下划线、删除线和荧光标记
点击最左边的字母B它代表的是粗体效果此时会出现下面这组标签
** **
这一对标签由两组“**”组成在他们的中间填上文字内容在右侧的预览中就可以看见加粗的效果。 同样的斜体文字、下划线文字、删除线文字以及荧光标记的代码和对应的效果如下
* * ~~ ~~ 分级标题
在工具栏中“H”字样代表标题在下拉菜单中可以选择标题的等级1~6级的代码和对应的效果如下
##################### 注意命令中的#和标题的内容一定要空格分开否则将无法识别#命令。
水平线
水平线可以用来划分笔记的区域其代码和对应的效果如下
--- 引用
如果想在笔记中引用一些内容以单独的区域展示出来使用的代码和对应的效果如下 也可以在每一行引用内容前都加上“” 不过要注意非引用部分要和引用部分以空行分开。
无序和有序列表
有时我们还需要在笔记中插入一些列表用于要点记录内容这时就可以用到无序和有序列表。
无序列表和有序列表的代码分别如下
-1.
注意命令符号和文本之间依然要隔一个空格。
在实际情况中常常还要用到多级标题。多级标题的方式是换行并且按一次tab键一个\t然后再使用“ - ”或者“ 数字 ‘.’ ”就像下面这样
- 一级- 二级1. 一级1. 二级12. 二级2
代码和对应效果如下 任务清单
任务清单也就是任务是否完成的情况记录完成了就在方框里面打个勾实现“未完成项目”和“已完成项目”的命令和效果如下
- [ ] - [x] 插入链接和图片
如果想在笔记中插入一段链接也是很好办的示例代码和效果如下网址就用CSDN吧
[这里面是链接显示的文字](这里面填链接的网址) 如果想要插入一张图片格式和插入链接是类似的代码和展示的效果如下
 内嵌代码和代码块
在博客开头的例子中我写了一段Java代码。在博客中我们也经常可以看见示例代码的区域。
而想要实现这个效果就需要用到内嵌代码和代码块其代码和展现的效果如下 *上面一组反单引号是一句代码下面一组三反单引号是一个代码块* 什么你问我反单引号怎么输入英文输入法看到键盘上面的横排小数字键了吗按最左边这个键 表格
表格常常是笔记中不可或缺的一部分因此还是需要掌握它的代码的以下面这个4*4的表格为例 上面颜色略深的部分叫做表头thead中间的部分是表身tbody 完成这个表格的代码是这样的
| | | | |
| --- | --- | --- | --- |
| | | | |
| | | | |
| | | | |
不难理解两个“ | ”之间的部分就是表格中的内容“ | --- | ”就是表头和表身的分界线 。
在后面我们也可以直接使用HTML来完成表格其实也是很简单的你甚至可以设置表格的样式比如大小、边框等这里就不展开说了。
公式
还记得上面的代码块是如何插入的吗数学公式的插入和它是差不多的不过要多一个math标记
math
(你的数学公式)类似的再加上一点代码我们可以得到一个化学公式
math
\ce{你的化学公式}在使用数学公式和化学公式时常常会用到很多符号。我在下面的表格里列出了几个常用的符号多的我也不会……
化学/数学公式少量符号 字母前数字正常显示字母后数字下标^ 加 任意内容上标用空格结束上标^↑气体v↓ 沉淀生成-动态平衡方程生成方向右-动态平衡方程生成方向左
博主高考考理综都多少年前了真不记得哪些符号了……
其他
最后的三项流程图、时序图、甘特图其实也可以用代码来写但是我个人不建议。
我的建议是使用专门绘制这些图的工具比如Visio等绘制出相关的图然后直接用前面所说的插入图片的方式插入。
其实对于上面的公式我也建议可以使用MATHTAB等专业的书写公式的工具制作完之后以图片的形式插入可以减少工作量也可以让效果更加美观。
源代码
关于Md案例讲解的全部源代码都放在这里了有兴趣的可以自己敲敲看。
**加粗文字***斜体文字*下划线文字~~删除线文字~~荧光标记文字# 标题一## 标题二### 标题三#### 标题四##### 标题五###### 标题六*** 引用的文字1引用的文字2引用的文字3引用的文字4这里就不是引用部分了- 无序一级1- 无序二级1- 无序二级2
- 无序一级21. 有序一级11. 有序二级12. 有序二级2
2. 有序一级2- [ ] 未完成- [x] 已完成[链接替换的文字](https://www.csdn.net/)我是一句代码
谁不是啊
我还是一段代码呢
| | | | |
| --- | --- | --- | --- |
| | | | |
| | | | |
| | | | |math
E mc^2
math
\ce{2H2O2 2H2O O2 ^}flowchart LRStart -- StopsequenceDiagramparticipant A as Aliceparticipant J as JohnA-J: Hello John, how are you?J-A: Great!gantttitle A Gantt DiagramdateFormat YYYY-MM-DDsection SectionA task :a1, 2014-01-01, 30dAnother task :after a1 , 20dsection AnotherTask in sec :2014-01-12 , 12danother task : 24d预告和回顾
PS系列的有关博客我暂时还没有写完同时也已经开始写和HTML有关的博客了。下一期可能先会接着出HTML的第一期博客因为PS第四期的UI博客内容有点多暂时写不动了……
还是那句话博主的初心不变还是以杂谈的形式分享知识交流心得并共同进步。
喜欢我的博客风格的朋友不妨看看我的SVN系列和PS系列的博客
项目管理 | SVN全一期
UI设计 | PS第一期当前更新到第三期
后话
笔者也是一个刚刚接触全栈的小白对于这些东西也是才会使用不久。关于这篇博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
【H2O2】
