From 4925fb5c29c59b7e17d050ab4346f71afc0463cd Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 11 Aug 2021 12:08:07 -0400 Subject: [PATCH] feat: info custom container --- docs/guide/markdown.md | 8 ++++++++ src/client/theme-default/styles/custom-blocks.css | 6 ++++++ src/node/markdown/plugins/containers.ts | 1 + 3 files changed, 15 insertions(+) diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 49fd2f4c..8d00d001 100644 --- a/docs/guide/markdown.md +++ b/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 ::: diff --git a/src/client/theme-default/styles/custom-blocks.css b/src/client/theme-default/styles/custom-blocks.css index ee52d4c0..38507ace 100644 --- a/src/client/theme-default/styles/custom-blocks.css +++ b/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; diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts index be9cf483..f632a0fe 100644 --- a/src/node/markdown/plugins/containers.ts +++ b/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