@diplodoc/quote-link-extension NPM

Diplodoc quote link extension

This is an extension of the Diplodoc platform, which allows adding quote links in the documentation.

The extension contains some parts:

Quickstart

Attach the plugin to the transformer:

import quoteLinkExtension from '@diplodoc/quote-link-extension';
import transform from '@diplodoc/transform';

const {result} = await transform(`
> [link title](http://example.ru){data-quotelink="true"}
>
> link content
`, {
    plugins: [
        quoteLinkExtension.transform({ bundle: false })
    ]
});

Prepared runtime

It is necessary to add runtime scripts to make quote links interactive on your page. You can add assets files which were generated by the MarkdownIt transform plugin.

<html>
    <head>
        <!-- Read more about '_assets/quote-link-extension.js' and '_assets/quote-link-extension.css' in 'Transform plugin' section -->
        <script src='_assets/quote-link-extension.js' async></script>
        <link rel='stylesheet' href='_assets/quote-link-extension.css' />
    </head>
    <body>
        ${result.html}
    </body>
</html>

Or you can just include runtime's source code in your bundle.

import '@diplodoc/quote-link-extension/runtime'
import '@diplodoc/quote-link-extension/runtime/styles.css'

Public css variables

--yfm-quote-link-background - sets the background color for the quote link. By default rgb(242, 242, 242). For the dark theme you can use rgb(56, 52, 56). --yfm-quote-link-background-hover - sets the background color for the quote link on hover. By default rgba(0, 0, 0, 0.05). For the dark theme you can use rgba(255, 255, 255, 0.1).

MarkdownIt transform plugin

Plugin for @diplodoc/transform package.

Options:

runtime.script - name on runtime script which will be exposed in results script section. Default: _assets/quote-link-extension.js
runtime.style - name on runtime css file which will be exposed in results style section. (Default: _assets/quote-link-extension.css)
bundle - boolean flag to enable/disable copying of bundled runtime to target directory. Where target directore is <transformer output option>/<plugin runtime option> Default: true

9 months ago

10 months ago

10 months ago

10 months ago

12 months ago