Badges can be used to annotate your pages with additional information or mark specific places in markdown content.

## Examples

| Shortcode | Output |
| --        | --     |
| `{{< badge style="info" title="hugo" value="0.147.6" >}}`     | <span class="book-badge info"><span class="book-badge-title">Hugo</span><span class="book-badge-value">0.147.6</span></span>     |
| `{{< badge style="success" title="Build" value="Passing" >}}` | <span class="book-badge success"><span class="book-badge-title">Build</span><span class="book-badge-value">Passing</span></span> |
| `{{< badge style="warning" title="Coverage" value="25%" >}}`  | <span class="book-badge warning"><span class="book-badge-title">Coverage</span><span class="book-badge-value">25%</span></span>  |
| `{{< badge style="danger" title="Issues" value="120" >}}`     | <span class="book-badge danger"><span class="book-badge-title">Issues</span><span class="book-badge-value">120</span></span>     |
| | |
| `{{< badge style="info" title="Title" >}}`                    | <span class="book-badge info"><span class="book-badge-title">Title</span></span>                    |
| `{{< badge style="info" value="Value" >}}`                    | <span class="book-badge info"><span class="book-badge-value">Value</span></span>                    |
| `{{< badge title="Default" >}}`                               | <span class="book-badge default"><span class="book-badge-value">Default</span></span>                               |

## Use in links 

A badge can be wrapped in markdown link producing following result: [{{< badge title="Hugo" value="0.147.6" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
```tpl
[{{< badge title="Hugo" value="0.147.6" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
```

# Buttons

Buttons are styled links that can lead to local page or external link.

## Example

```tpl
{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}
```

{{% columns %}}
- {{< card href="/docs/shortcodes/cards" >}}
  **Markdown**  
  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
  {{< /card >}}

- {{< card >}}
  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
  {{< /card >}}

- {{< card title="Card" >}}
  ### Heading
  This is tab MacOS content.
  {{< /card >}}
{{% /columns %}}

{{% columns %}}
- ### Left Content
  Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
  stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
  protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
  Miseratus fonte Ditis conubia.

- ### Mid Content
  Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
  stringit, frustra Saturnius uteroque inter!

- ### Right Content
  Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
  stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
  protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
  Miseratus fonte Ditis conubia.
{{% /columns %}}

{{% details "Title" [open] %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

{{% details title="Title" open=true %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

{{< media-card 
  type="movie"
  director="皮埃尔·布特龙" 
  countries="法国/比利时" 
  date="2004 - 1h33m" 
  title="《沉静如海》"
  stars="Julie Delarme/Michel Galabru/Thomas Jouannet"
  types="爱情/战争"
  image="/p541622159.webp"
  backimage="/p791070481.webp"
  description="你沉静如海，我听见涛声"
  rating="⭐⭐⭐⭐⭐"
>}}

{{/* %details "观后感 " */ %}}
我之所以...喜欢大海     
是因为它的宁静  
我说的不是..海浪    
而是别的东西    
神秘的东西  

是隐藏在深处    
明亮的大海  
大海是宁静的    
要学会倾听  
------《沉静如海》
{{/* %/details */ %}}

{{< /media-card >}}

{{% hint %}}
**Markdown content**  
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{% /hint %}}

{{< katex display=true >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

```mermaid
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
```

{{< pythontutor language="java" height="300" >}}
// Java代码
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
{{< /pythontutor >}}

{{< pythontutor >}}
def decorator_function(original_function):
    def wrapper(*args, **kwargs):
        # 这里是在调用原始函数前添加的新功能
        before_call_code()
        
        result = original_function(*args, **kwargs)
        
        # 这里是在调用原始函数后添加的新功能
        after_call_code()
        
        return result
    return wrapper

# 使用装饰器
@decorator_function
def target_function(arg1, arg2):
    pass  # 原始函数的实现
{{< /pythontutor >}}

{{< pythontutor language="c" height="400" >}}
#include <stdio.h>
int main() {
    printf("Hello");
    int m = pow(10,2);
    printf("%d\n",m);
    return 0;
}
{{< /pythontutor >}}

{{< pythontutor width="100%" height="500" language="cpp" >}}
#include <iostream>
using namespace std;
int main() {
    int x = 5;
    int y = 10;
    cout << "Sum: " << x + y << endl;
    return 0;
}
{{< /pythontutor >}}

{{< revealjs theme="white" transition="slide" progress="true" controls="true"  history="true" >}}

# Revealjs
## 嗨😄~ 这是网页幻灯片

---

<p align="center">
<img src="/logo.png " width=200 />
<center style="font-size:12px;color:#c9c9c9;text-decoration:underline"> logo  </center>
</p>

下面隐藏了你看不见的内容 👇


Note:
"迟来的不如永远不来，不是吗？"

---

### 插入图片

<p align="center">
<img src="/logo.png " width=400 />
<center style="font-size:12px;color:#c9c9c9;text-decoration:underline"> logo  </center>
</p>

<details ><summary>Yu </summary>
  <div class="markdown-inner">
    
  </div>
</details>


---

### 插入表格

| Column1 | Column2 | Column3 |
| --------------- | --------------- | --------------- |
| Item1.1 | Item2.1 | Item3.1 |


---

### 插入代码

```cpp 
#include <iostream>
int main(){
    cout << "Hello, Yuoek" << endless
    return 0;
}

```

下面还有 👇

___


```js 
[1-2|3|4]
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
```

--- 

### 插入 $\LaTeX$ 

\\(H_2O\\)

$$
x^2 = y^2
$$
___

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

{{< /revealjs >}}

{{% steps %}}
1. ## Suspendisse sed congue orci.
   ...

2. ## Maecenas scelerisque sem.
   ...

3. ## Etiam risus purus.
   ...

4. ## Curabitur sed lacinia velit.
   ...
{{% /steps %}}

{{< subtitle id="Rosie" >}}

1263
00:00:53,100 --> 00:00:55,400
现在站在这的你  就是最完美的你
standing where you are right now, perfect.

1264
00:01:00,180 --> 00:01:03,710
然后我用充满男子气概的方式把你抱住
And I took you in my arms, in a manly kind of way.

1265
00:01:05,420 --> 00:01:06,580
像这样
Like this.

1266
00:01:07,720 --> 00:01:09,180
然后说
And said,

1267
00:01:12,720 --> 00:01:16,220
"罗茜  邓恩  你能带我去跳舞吗"
"Rosie Dunne, can I take you to the dance?"

1268
00:01:20,730 --> 00:01:29,260
迟来的总比没有好！
Better late than never.

{{< /subtitle >}}

{{< tabs "id" >}}  
{{% tab "MacOS" %}} # MacOS Content {{% /tab %}}  
{{% tab "Linux" %}} # Linux Content {{% /tab %}}  
{{% tab "Windows" %}} # Windows Content {{% /tab %}}  
{{< /tabs >}}