经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » Markdown » 查看文章
【原】无脑操作:Markdown可以这样玩
来源:cnblogs  作者:{name:"代码屠夫"}  时间:2019/6/24 8:53:20  对本文有异议

一、背景:

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,可以使普通文本内容具有一定的格式。因为语法简单明了、功能又比纯文本强大,所以很适合作为开发人员的书写工具。
Markdown的编辑器很多,常用的有:MarkdownPad、Typora、MarkdownEditor等。不过在最近的尝试中,发现了一个比较适合开发人员使用的书写工具VSCode。

二、安装:

在VSCode官网:https://code.visualstudio.com/#alt-downloads进行下载,根据自己的操作系统版本选择对应的安装版本。VSCode的安装很简单,选择安装路径一路回车安装就好了。

注意:VSCode默认的自定义插件位置在C:\Users\用户名\.vscode\extensions

         

三、配置:

VSCode好用的插件很多,列了如下这几个,其中Markdown工具和Markdown转PDF工具是搭建Markdown书写环境所必需的。

1、Chinese中文语言支持插件(安装后需要重启VSCode)

2、Material Theme主题插件

3、Material Icon Theme主题图标插件

4、Markdown Preview Enhanced插件

5、Markdown PDF插件

四、使用:

 

常用的Markdown语法

  1. 1 # 01、注释
  2. 2
  3. 3 - 通用写法、使用HTML注释
  4. 4 ```html
  5. 5 <!-- HTML的注释 -->
  6. 6 ```
  7. 7 <!-- 这是HTML注释,看不见吧 -->
  8. 8
  9. 9 ---
  10. 10
  11. 11 # 02、标题
  12. 12
  13. 13 # 级别1
  14. 14 ## 级别2
  15. 15 ### 级别3
  16. 16 #### 级别4
  17. 17 ##### 级别5
  18. 18 ###### 级别6
  19. 19
  20. 20 ---
  21. 21
  22. 22 # 03、引用
  23. 23
  24. 24 > 常常用来引用其他的资料
  25. 25
  26. 26 > 曹植.《洛神赋》
  27. 27 > 彷佛兮若轻云之蔽月,飘飘兮若流风之回雪
  28. 28 ---
  29. 29
  30. 30 # 04、粗体斜体
  31. 31
  32. 32 *这会是 斜体 的文字*
  33. 33 _这会是 斜体 的文字_
  34. 34
  35. 35 **这会是 粗体 的文字**
  36. 36 __这会是 粗体 的文字__
  37. 37
  38. 38 _可以 **组合** 使用粗体 斜体符号_
  39. 39
  40. 40 ~~文字将会被横线删除~~
  41. 41
  42. 42 ---
  43. 43
  44. 44 # 05、列表
  45. 45
  46. 46 ## 1、无序列表
  47. 47 * 安徽省
  48. 48 * 合肥市
  49. 49 * 铜陵市
  50. 50 * 淮南市
  51. 51 - 江苏省
  52. 52 + 南京市
  53. 53 + 苏州市
  54. 54
  55. 55 ## 2、有序列表
  56. 56 1. 浙江省
  57. 57 1.1. 杭州市
  58. 58 1.2. 宁波市
  59. 59 2. 湖北省
  60. 60 2.1. 武汉市
  61. 61 2.2. 荆州市
  62. 62
  63. 63 ---
  64. 64
  65. 65 # 06、分隔线
  66. 66
  67. 67 ***
  68. 68 ___
  69. 69 ---
  70. 70
  71. 71 # 07、代码块
  72. 72
  73. 73 ```java
  74. 74 class Person {
  75. 75 public void static main() {
  76. 76 System.out.println("小前端也会服务端编程");
  77. 77 }
  78. 78 }
  79. 79 ```
  80. 80
  81. 81 <!-- highlight 语法高亮 -->
  82. 82 ```javascript{highlight=2-6}
  83. 83 var programmer = {
  84. 84 name : '尤JJ',
  85. 85 gender : '女',
  86. 86 work: function() {
  87. 87 console.log('废寝忘食');
  88. 88 }
  89. 89 }
  90. 90 ```
  91. 91
  92. 92 ---
  93. 93
  94. 94 # 08、链接
  95. 95
  96. 96 [百度](https://www.baidu.com)
  97. 97
  98. 98 ---
  99. 99
  100. 100 # 09、任务列表
  101. 101
  102. 102 - [x] 吃饭
  103. 103 - [ ] 睡觉
  104. 104 - [x] 搬砖
  105. 105
  106. 106 ---
  107. 107
  108. 108 # 10、表格
  109. 109
  110. 110 <!--
  111. 111 :---: 居中
  112. 112 :----- 居左
  113. 113 ------: 居右
  114. 114 -->
  115. 115 |序号 |姓名 |性别 |薪资 |
  116. 116 |:---:|:-----|:---:|------:|
  117. 117 |1 |武JC |男 |987.65|
  118. 118 |2 |尤JJ |女 |123.45|
  119. 119
  120. 120 ---

 

         

                

 Markdown中也可以绘制图表,以绘制流程图 和 序列图为例

  1. # 01、绘制流程图
  2. <!-- 基于flowchart.js绘制 -->
  3. ```flow
  4. start=>start: 项目启动
  5. end=>end: 项目结束
  6. opt1=>operation: 需求分析
  7. condition=>condition: 需求评审
  8. opt3=>operation: 编码实现
  9. start->opt1(right)->condition
  10. condition(yes,right)->opt3
  11. condition(no)->end
  12. opt3->end
  13. ```
  14. ---
  15. # 02、绘制序列图
  16. <!-- 基于js-sequence-diagrams绘制 -->
  17. ```sequence
  18. Title: 日常交流
  19. Boy->Girl: 钥匙、伞、早饭
  20. Note right of Girl: 心烦意乱...
  21. Girl-->Boy: 不关你事儿
  22. Boy->>Girl: 别久坐,多喝水
  23. ```
  24. ---

        

原文链接:http://www.cnblogs.com/iflytek/p/11060555.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号