Markdown Extensions


        wangyi7099
Last updated on 2019-09-08 12:51:91

Markdown Extensions

Ant Design Components

Antdsite can render some markdown syntax tags into common Ant Design components

Prompt box

Corresponding component: Alert

Input:

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: error
This is a dangerous waring
:::

Output:

Tip

This is a tip

Warning

This is a warning

Caveat

This is a dangerous waring

You can also use a custom title:

Input:

::: tip | Title with spaces
This is a tip for a custom title
:::

Output:

Title with spaces

This is a tip for custom title .

See also:

Line highlighting in the code block

Enter:

```js{4}
export default {
  data() {
    return {
      msg: 'Highlighted!'
    };
  }
};
```

Output:

export default {
  data() {
    return {
      msg: 'Highlighted!'    };
  }
};

reference:

Display line number

Enter:

```javascript{numberLines:true}{4}
// In your gatsby-config.js
Plugins: [
  {
    Resolve: `gatsby-transformer-remark`,
    Options: {
      Plugins: [`gatsby-remark-prismjs`]
    }
  }
];
```

Output:

// In your gatsby-config.js
Plugins: [
  {
    Resolve: `gatsby-transformer-remark`,    Options: {
      Plugins: [`gatsby-remark-prismjs`]
    }
  }
];

reference:

Highlight the code in the line

Enter:

I can highlight this code with css syntax: `css>>>.some-class { background-color: red }`

I can highlight this code with js syntax: `js>>>const foo = 'bar';`

Output:

I can highlight this code with css syntax: .some-class { background-color: red }

I can highlight this code with js syntax: const foo = 'bar';

reference: