1. markdown-it-tips
Markdown-it plugin to create tips.
markdown-it-tips
Package: markdown-it-tips
Created by: zlluGitHub
Last modified: Sun, 08 May 2022 20:27:08 GMT
Version: 1.0.3
License: MIT
Downloads: 56
Repository: https://github.com/zlluGitHub/markdown-it-tips

Install

npm install markdown-it-tips
yarn add markdown-it-tips

markdown-it-tips

Markdown-it plugin to create tips. You can use any type of tip you want, proposed is to use the same type for everything; warning,error,success,info,danger or keep the type blank for the default styling of a message.

 ::: warning
Hello world! [Link](#).
:::

Gets converted to:

 <div class="md-tip md-tip-warning" role="md-tip">
<p>Hello world! <a href="#" class="md-tip-link">Link</a>.</p>
</div>

Install

 $ npm install markdown-it-tips --save

Usage

Enable plugin

 var md = require('markdown-it');
var tips = require('markdown-it-tips');

md().use(tips);

Options

Enable/disable adding class md-tip-link to links inside tips.

 var md = require('markdown-it');
var tips = require('markdown-it-tips');

md().use(tips, {links: false});

Example

With option links enabled (by default):

 This is a test. [Link](#).

::: success
Hello world! [Link](#).
:::

This is a test. [Link](#).

Gets converted to:

 <p>This is a test. <a href="#">Link</a>.</p>
<p class="md-tip md-tip-success" role="md-tip">
<p>Hello world! <a href="#" class="md-tip-link">Link</a>.</p>
</p>
<p>This is a test. <a href="#">Link</a>.</p>

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin