feat: info custom container

Author: yyx990803

docs/guide/markdown.md

@@ -128,6 +128,10 @@ Custom containers can be defined by their types, titles, and contents.
 This is a tip
 :::
 
+::: info
+This is an info box
+:::
+
 ::: warning
 This is a warning
 :::
@@ -143,6 +147,10 @@ This is a dangerous warning
 This is a tip
 :::
 
+::: info
+This is an info box
+:::
+
 ::: warning
 This is a warning
 :::

src/client/theme-default/styles/custom-blocks.css

@@ -1,4 +1,5 @@
 .custom-block.tip,
+.custom-block.info,
 .custom-block.warning,
 .custom-block.danger {
   margin: 1rem 0;
@@ -12,6 +13,11 @@
   border-color: var(--c-brand);
 }
 
+.custom-block.info {
+  background-color: #f3f5f7;
+  border-color: var(--c-text-light-2);
+}
+
 .custom-block.warning {
   border-color: #e7c000;
   color: #6b5900;

src/node/markdown/plugins/containers.ts

@@ -5,6 +5,7 @@ const container = require('markdown-it-container')
 
 export const containerPlugin = (md: MarkdownIt) => {
   md.use(...createContainer('tip', 'TIP'))
+    .use(...createContainer('info', 'INFO'))
     .use(...createContainer('warning', 'WARNING'))
     .use(...createContainer('danger', 'WARNING'))
     // explicitly escape Vue syntax