您的位置:

详解Markdown高亮

在编写文档时,我们经常需要在一些核心内容上做出突出的效果,比如代码、关键字等。Markdown高亮可以帮助我们实现这种需求,让文档更加美观易读。本文将探讨Markdown高亮的各个方面。

一、Markdown高亮显示

Markdown高亮显示有两种方式,一种是使用html标签,一种是使用Markdown语法。下面分别介绍这两种方式。

1、使用html标签

使用html标签实现文本高亮效果非常简单,只需要在关键字或代码片段前后分别加上<mark></mark>标签即可。示例代码如下:

<p>这是一段需要<mark>高亮</mark>的文本</p>

效果如下:

这是一段需要高亮的文本

2、使用Markdown语法

Markdown提供了一种简单的方式实现高亮效果,即使用反引号`将需要高亮的文本包围起来。示例代码如下:

这是一段需要 `高亮` 的文本

效果如下:

这是一段需要 高亮 的文本

二、Markdown高亮语法

Markdown高亮语法是指,在Markdown文档中实现高亮效果所需要使用的语法。下面列举一些常用的高亮语法。

1、行内代码块

前面已经介绍了使用反引号实现高亮效果的方式。除此之外,在需要高亮的文本前后添加`也可以实现同样的效果。区别在于,使用反引号包裹文本时,需要保证文本内部没有反引号。

示例代码:

这是一段需要 `高亮` 的文本,`这里也可以使用`。

效果如下:

这是一段需要 高亮 的文本,这里也可以使用

2、代码块

对于较长的代码段,我们需要使用代码块来实现高亮。使用代码块的方式是,在代码段前后分别使用三个反引号(```)包围,并在第一行指定代码块的语言类型。通常情况下,语言类型可以使用小写字母来指定。

示例代码:

```python
def hello():
    print("Hello, world!")
```

效果如下:

```python def hello(): print("Hello, world!") ```

三、Markdown高亮C代码

C语言代码的高亮要稍微复杂一些,需要使用专门的语法进行指定。接下来我们将介绍如何使用highlight.js实现C代码的高亮。

1、引入highlight.js

在html中,需要引入highlight.js库和C语言的highlight.js模块。示例代码如下:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js%406.3.0/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js%406.3.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js%406.3.0/languages/cpp.min.js"></script>

2、指定代码块的语言类型

在代码块中,我们需要增加class="hljs cpp",其中class="hljs"是固定的,默认已经引入,cpp表示语言类型。

示例代码:

<pre><code class="hljs cpp">
#include <iostream>

int main() {
    std::cout << "Hello, world!" << std::endl;
    return 0;
}
</code></pre>

效果如下:


#include 
   

int main() {
    std::cout << "Hello, world!" << std::endl;
    return 0;
}

   

四、Markdown高亮文字

有时候,我们并不需要高亮整个文本段落,而只是需要突出一部分关键词。Markdown提供了emstrong标签来实现这种效果。

1、使用em标签

使用em标签可以将文本加粗并斜体显示。示例代码如下:

<p>这是一段需要<em>突出显示</em>的文本</p>

效果如下:

这是一段需要突出显示的文本

2、使用strong标签

使用strong标签可以将文本加粗显示。示例代码如下:

<p>这是一段需要<strong>加粗显示</strong>的文本</p>

效果如下:

这是一段需要加粗显示的文本

五、Markdown高亮颜色

有时候,我们不仅需要高亮文本,还需要自定义高亮的颜色。下面介绍两种实现方式。

1、使用html标签

使用html标签可以自定义高亮的颜色。示例代码如下:

<p>这是一段需要<mark style="background-color: blue">自定义颜色高亮</mark>的文本</p>

效果如下:

这是一段需要自定义颜色高亮的文本

2、使用css

使用css也可以实现自定义颜色高亮。在html中,我们额外需要引入一个css文件,并在标签中指定对应的class。示例代码如下:

<link rel="stylesheet" href="custom.css">
<p class="highlight">这是一段需要自定义颜色高亮的文本</p>

css文件内容如下:

.highlight {
  background-color: yellow;
}

效果如下:

这是一段需要自定义颜色高亮的文本