This is the English content.
This is a test for bilingual blog support. You should see language toggle buttons below the title.
If you see this post in the main list, you should see the EN/CN badge.
This document demonstrates the various custom content blocks supported by the blog theme and how to use them. Every style includes source code examples and the actual rendered result.
1. Basic Blocks
Supports four basic state colors: Standard, Success, Info, Warning, Error.
HTML Syntax
Use <div class="*-block" markdown="1"> (Note that markdown="1" is required for processing internal MD content).
Source Example:
<!-- Normal/Default -->
<div class="neutral-block" markdown="1">
<div class="block-title">Neutral Block</div>
This is a default style block.
</div>
<!-- Success/Green -->
<div class="success-block" markdown="1">
<div class="block-title">Success Block</div>
Operation successful.
</div>
<!-- Info/Blue -->
<div class="info-block" markdown="1">
<div class="block-title">Info Block</div>
General information.
</div>
<!-- Warning/Yellow -->
<div class="warning-block" markdown="1">
<div class="block-title">Warning Block</div>
Warning message.
</div>
<!-- Error/Red -->
<div class="error-block" markdown="1">
<div class="block-title">Error Block</div>
Error or dangerous operation.
</div>
Rendered Result:
This is a default style block.
Operation successful.
General information.
Warning message.
Error or dangerous operation.
Liquid Tag Syntax
Use {% plain type title="..." %}.
Source Example:
{% plain success title="Liquid Success" %}
This is a block generated using Liquid tags.
{% endplain %}
{% plain error title="Liquid Error" %}
This is an error block generated using Liquid tags.
{% endplain %}
Rendered Result:
This is a block generated using Liquid tags.
This is an error block generated using Liquid tags.
2. Academic Blocks
Supports common academic environment definitions: proof, theorem, lemma, proposition, definition, example, remark, note, solution.
Basic Usage (Default Block Title)
HTML Source:
<div class="theorem" markdown="1">
This is a theorem.
</div>
<div class="proof" markdown="1">
This is a proof.
</div>
Liquid Source:
{% theorem %}
This is a theorem (Liquid).
{% endtheorem %}
Rendered Result:
This is a theorem.
This is a proof.
Inline Title Style
Add inline class or parameter.
Source:
<div class="proof inline" markdown="1">
Title and content are on the same line.
</div>
{% note inline %}
Note: This is a note with an inline title.
{% endnote %}
Rendered Result:
Title and content are on the same line.
Note: This is a note with an inline title.
Custom Title
Use data-title attribute or title parameter.
Source:
<div class="lemma" data-title="Zorn's Lemma" markdown="1">
Every non-empty partially ordered set has a maximal element...
</div>
{% proposition title="My Proposition" %}
This is a proposition with a custom title.
{% endproposition %}
Rendered Result:
Every non-empty partially ordered set has a maximal element…
This is a proposition with a custom title.
3. Collapsible Blocks
HTML Syntax (details & summary)
Source:
<details class="info" markdown="1">
<summary data-title="Click to expand details"></summary>
Here is the hidden detailed content.
</details>
Rendered Result:
Here is the hidden detailed content.
Liquid Syntax (fold parameter)
Source:
{% example fold title="View Code Example" %}
```python
print("Hidden Code")
```
{% endexample %}
Rendered Result:
print("Hidden Code")
4. Code Block Enhancements
Supports adding titles, default fold states, and special styles to code blocks.
Code Blocks with Titles
Add {: title="..." } below the code block.
Source:
```python
def main():
pass
```
{: title="main.py" }
Rendered Result:
def main():
pass
Default Folded Code Blocks
Use fold="true" (default folded) or fold="open" (default expanded).
Source:
```javascript
// Long code folded
const bigFile = "...";
```
{: title="config.js" fold="true" }
Rendered Result:
// Long code folded
const bigFile = "...";
Semantic Color Code Blocks
Use type="..." parameter. Supports example (green), exploit (blue), error (red).
Source:
```bash
# This is a correct example
npm install
```
{: type="example" }
```c
// This is an exploit code
char buf[10];
strcpy(buf, input);
```
{: type="exploit" title="vulnerable.c" }
```bash
# This is an error operation
rm -rf /
```
{: type="error" }
Rendered Result:
# This is a correct example
npm install
// This is an exploit code
char buf[10];
strcpy(buf, input);
# This is an error operation
rm -rf /
Liquid Code Block Wrapper
Source:
{% code_block success fold title="Wrapped Code" %}
```python
print("Wrapped in Liquid")
```
{% endcode_block %}
Rendered Result:
print("Wrapped in Liquid")