Bootstrap>> gatsby-remark-admonitions>> 返回
项目作者： hmajid2301

项目描述 ：
A gatsby remark plugin for remark-admonitions. Mirrored from https://gitlab.com/hmajid2301/gatsby-remark-admonitions
高级语言： JavaScript
项目地址: git://github.com/hmajid2301/gatsby-remark-admonitions.git
创建时间： 2020-09-11T11:36:21Z
项目社区：https://github.com/hmajid2301/gatsby-remark-admonitions
开源协议：
下载


gatsby-remark-admonitions

This is a Gatsby plugin for the remark-admonitions plugin.

Example Admonition

How to use

Install

Install the package with npm.

  1. # with npm
  2. npm i gatsby-remark-admonitions
  4. # or with yarn
  5. yarn add gatsby-remark-admonitions

Usage

To use the plugin add it to your gatsby-config.js:

  1. {
  2.   resolve: 'gatsby-transformer-remark',
  3.   options: {
  4.     plugins: [
  5.       {
  6.         resolve: `gatsby-remark-admonitions`,
  7.         options: {
  8.           customTypes: {
  9.             custom: {
  10.               keyword: "test",
  11.               emoji: '💻',
  12.               svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>'
  13.             },
  14.           },
  15.           tag: ":::",
  16.           icons: "svg",
  17.         }
  18.       },
  19.     ]
  20.   }
  21. }
Prop Required Type Description
customTypes false customTypes This option can be used to add additional types of admonitions.
tag false string The tag used for creating admonitions, defaults to :::.
icons false `”svg”\ “emoji”\ “none”` The type of icon to use, defaults to svg.

Where the customTypes is defined as:

  1. const customTypes = {
  2.   [string: keyword]: {
  3.     ifmClass: string,
  4.     keyword: string,
  5.     emoji: string,
  6.     svg: string,
  7.   } | string
  8. }

CSS Styles

You will also need to import the css styles to style your admonitions. You can do this where ever you want but if
you need the styles globally import then into gatsby-browser.js

  1. //gastby-browser.js
  2. import "remark-admonitions/styles/classic.css";

Examples

Using the default options you can add admonitions to your markdown files like so:

  1. :::keyword title
  2. Contents
  3. :::

Where default keywords you can use include the following tip, warning, caution, note & important

  1. :::tip pro tip
  2. remark-admonitions is pretty great!
  3. :::

You can include any markdown component within the admonitions (except another admonition).

  1. :::note This includes code
  3. \```bash
  4. ls -l
  5. \```
  6. :::

You can view more examples in the examples/README.md file.