markdown编辑技巧

最新推荐文章于 2022-05-19 15:36:30 发布

鲸落_falling

最新推荐文章于 2022-05-19 15:36:30 发布

阅读量204

点赞数

分类专栏： markdown编辑技巧文章标签： markdown编辑技巧

本文链接：https://blog.csdn.net/qq_37937830/article/details/90764566

版权

markdown编辑技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

markdown编辑技巧

最近开始尝试写博客，写的第一篇是关于嵌入式的详细的复习提纲，（正好有这个想法的时候已经是考试周了）于是就想借复习的机会学习markdown编辑博文的技巧，因为突然发现之前做过的项目再回看映像不是很深了，于是想用博客记录一下自己做过的东西。第一篇博客，PPT复制粘贴、书本考点精华再加上自己的一些想法与理解与代码详细分析加起来写了快三万字。对于markdown的语法也大体有了一定的了解。
本篇博客则用来记录之前已经（以及以后将会）对于markdown语法编辑的一些需求以及编辑技巧。

1、怎么首行缩进、占空

这个问题是困扰我的第一个问题，习惯了Tab键缩进的操作，在写第一篇博文的时候发现缩进是一个难题，根据帮助文档的方法，我试过通过List item 也就是下面的方式达到我想要的缩进效果，这种方式能很好的表现一个基于级别的层层深入的目录结构，但是对于一段话的首行缩进却很为难。
List item

first
- second
  - third
    - forth

之后，我还试过自定义列表的方式缩进，发现对于第一行文字来说有很好的效果，但是往后的弊端就慢慢体现出来了

Authors

John

Luke

直到最后，我找到了这串代码，完美的解决了首行缩进的需求。

&#160; &#160; &#160; &#160;首行缩进了

执行效果：
首行缩进了
仔细观察这段代码不难发现，这相当于是四个一样的占空符，我们知道一个汉字两个字节，而一个英文字符一个字节，所以这一串占空代码就占一个字节，当我们需要缩进两个汉字的时候，自然需要4个占空字符串。当然也可以单独使用，以达成更加灵活的缩进以及占空需求。当然在复制的时候，别忘了最后的分号。

半角空格全角空格
weisuojin参照行
半角空格缩进行 
未缩进参照行
全角空格缩进行&emsp;

2、怎么文本居中

文本居中是困扰我的第二个问题，在这个问题的解决中，我发现了markdown框架对于Html语法的支持，这是相当于发现了一系列问题的解决方案。在以后出现相关问题与需求的时候，我们可以优先考虑能不能用H5的语法来解决问题。
话不多说，奉上代码:

<center>文本居中</center>

执行效果：

文本居中

3、代码块

标记代码块有三种格式：

第一种，是利用缩进(Tab)，刚刚演示了
```
  制表符代码块示例
```
第二种，利用 ` 符号（和～同键）包裹代码。
- 代码片，利用单个`符号语句内包裹
```
代码片语句`内`包裹
```
  执行效果：
  代码片语句内包裹
- 代码块，整段包裹
```
	```
  	这是代码块
  	
	```
```
  执行效果：
```
这是代码块
```

4、语法高亮

看了三之后，又会有另一个问题，为啥执行结果的代码块是灰色的，并没有贴代码用的黑色代码块带代码语法高亮的炫酷感。其实，只需要在```后面加上你想要哪个语言的语法高亮的名字就行了。

例：比如上文和这里有的代码块用的是html的语法高亮

	```html		<!-- <此代码块用的就是html的语法高亮，因此代码块里面的就是执行效果 -->
				<!-- 只不过最终结果里不会显示“html”和上下两段```-->
	<!DOCTYPE html>
	<html>
		<head>
		  <meta charset="utf-8">
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		  <title>一个网页代码示例</title>
		</head>
		<body class="stackedit">
			<h2>这是标题</h2>
			<p>这是段落</p>
			<p>html语法高亮示例</p>
		</body>
	</html>
	```

接下来同样的代码用Java试试

	```java	   <!-- <此代码块用的就是java的语法高亮，因此代码块里面的就是执行效果-->
			   <!-- 只不过不会显示“java”和上下两段```-->
	<!DOCTYPE html>
	<html>
		<head>
		  <meta charset="utf-8">
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		  <title>一个网页代码示例</title>
		</head>
		<body class="stackedit">
			<h2>这是标题</h2>
			<p>这是段落</p>
			<p>html语法高亮示例</p>
		</body>
	</html>
	```

接下来贴一段真正的java代码

	```java		//java 语法高亮示例
				#python注释不支持
	import java.io.File;
	public class HelloWorld {
	    public static void main(String[] args) {
	        System.out.println("Hello World");
	    }
	}
	
	```

可以看出不支持python的注释

python语法高亮示例

	```python
	# -*- coding: UTF-8 -*-
	# 定义函数
	//java注释不支持
	def printme( str ):
	   print str;
	   return;
	 
	# 调用函数
	printme("python语法高亮示例!");
	```

可以看出不支持java的注释。

哈哈我就是想看看哪个语法高亮好看点才试这么多的。其实没必要。在```加你想要的语言就行了。

5、字体大小以及颜色

很多类似操作都可以用h5语法解决

字体
代码：

<font face="黑体">黑体字</font>
<font face="宋体">宋体字</font>

执行结果：
黑体字
宋体字

字体大小
代码：

<font face="黑体" size=2>我是黑体2号</font>
<font face="黑体" size=5>我是黑体5号</font>

执行结果：
我是黑体2号
我是黑体5号

字体颜色

<font color=red  size=2>红色</font>
<font color=blue size=2>蓝色</font>

红色
蓝色

6、分割线

这里就是和H5语法一样了
代码

<hr>

执行结果

7、换行

这里不要吐槽
有些时候enter键的换行并不能满足我们多样化的编辑需求，比如在表格中换行直接用enter表格格式就会被破坏
这里需要用到
符号实现表格内换行

目标 | 特点
-------- | -----
博主本人  | 优秀<br>帅气

目标	特点
博主本人	优秀帅气

先到这里吧，以后接着补充

鲸落_falling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
markdown编辑技巧

帮助文档自定义       缩进
复制链接

扫一扫

专栏目录