在新部落格寫文用的相關工具

<div class="post-content">
<div class="xg-grid">
<div class="xg-col-8 xg-col-sm-12">

左邊主文
* 主文條列1
* 主文條列2
* 主文條列3

</div>
<div class="xg-col-4 xg-col-sm-12">

右側放置處（可放圖片）
![圖片放置處](https://fimg.yuaner.tw/300)

</div>
</div>
</div>

> 這是 **xg-alertbar-success** 樣式，使用markdown-it-attrs，跑在<blockquote>要素
{.xg-alertbar .xg-alertbar-success}

::: xg-alertbar xg-alertbar-success
這是 **xg-alertbar-success** 樣式，使用div render寫法，有用到markdown-it-container
:::

::: xg-alertbar xg-alertbar-error
這是 **xg-alertbar-error** 樣式，使用div render寫法，有用到markdown-it-container

* 並產生多行
* 並產生多行
* 並產生多行
:::

這是 **xg-alertbar-info** 樣式，有用到markdown-it-attrs，跑在<p>要素裡 {.xg-alertbar .xg-alertbar-info}

這段字是[防止被劇透的黑幕設計]{.heimu}測試

直接做整段防止被劇透的黑幕設計測試 {.heimu}

![圖片放置處](https://fimg.yuaner.tw/100) {.heimu}

這段字是[防止被劇透的模糊文字設計]{.hovers-blur}測試

直接做整段防止被劇透的模糊文字設計測試 {.hovers-blur}

![圖片放置處](https://fimg.yuaner.tw/100) {.hovers-blur}