<div data-gb-custom-block data-tag="ace" data-edit='true' data-lang='c_cpp'>
// This is a hello world program for C.
#include <stdio.h>
int main(){
printf("Hello World!");
return 1;
}
</div>
This text is
<div data-gb-custom-block data-tag="em">highlighted !</div>
This text is
<div data-gb-custom-block data-tag="em">highlighted with **markdown**!</div>
This text is
<div data-gb-custom-block data-tag="em" data-type='green'>highlighted in green!</div>
This text is
<div data-gb-custom-block data-tag="em" data-type='red'>highlighted in red!</div>
This text is
<div data-gb-custom-block data-tag="em" data-color='#ff0000'>highlighted with a custom color!</div>
When
<div data-gb-custom-block data-tag="math">a \ne 0</div>, there are two solutions to <div data-gb-custom-block data-tag="math">(ax^2 + bx + c = 0)</div> and they are <div data-gb-custom-block data-tag="math">x = {-b \pm \sqrt{b^2-4ac} \over 2a}.</div>
$$
\int_{-\infty}^\infty g(x) dx
$$
$$
1 \over 3
$$
<!--sec data-title="Sectionx Demo" data-id="section0" data-show=true ces-->
Insert markdown content here (you should start with h3 if you use heading).
<!--endsec-->
<video id="my-video" class="video-js" controls preload="auto" width="100%"
poster="https://book.ainiok.com/resource/poster.jpg" data-setup='{"aspectRatio":"16:9"}'>
<source src="https://book.ainiok.com/resource/demo.mp4" type='video/mp4' >
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
另外我们还要再配置下css，即在website.css中加入
.video-js {
width:100%;
height: 100%;
}
<br />
<video id="my-video" class="video-js" controls preload="auto" width="100%" poster="https://book.ainiok.com/resource/poster.jpg" data-setup='{"aspectRatio":"16:9"}'>
<source src="http://book.ainiok.com/resource/demo.mp4" type='video/mp4' >
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
delimiter: Sequence of characters between the prompt and the command.
error: Error message.
path: Directory path shown in the prompt.
prompt: Prompt of the user.
warning: Warning message.
标签的使用格式如下所示：
**[<tag_name> 内容]
为了使标签正常工作，需要在代码块的第一行加入 **[termial] 标记，下面是一个完整的示例：
```
**[terminal]
**[prompt foo@joe]**[path ~]**[delimiter $ ]**[command ./myscript]
Normal output line. Nothing special here...
But...
You can add some colors. What about a warning message?
**[warning [WARNING] The color depends on the theme. Could look normal too]
What about an error message?
**[error [ERROR] This is not the error you are looking for]
```
效果如下所示：
**[terminal]
**[prompt foo@joe]**[path ~]**[delimiter $ ]**[command ./myscript]
Normal output line. Nothing special here...
But...
You can add some colors. What about a warning message?
**[warning [WARNING] The color depends on the theme. Could look normal too]
What about an error message?
**[error [ERROR] This is not the error you are looking for]
Info styling
> **[info] For info**
>
> Use this for infomation messages.
Warning styling
> **[warning] For warning**
>
> Use this for warning messages.
Danger styling
> **[danger] For danger**
>
> Use this for danger messages.
Success styling
> **[success] For info**
>
> Use this for success messages.
