Have ideas to improve npm?Join in the discussion! »

    vuepress-markdown-it-wikilink

    1.0.1 • Public • Published

    npm npm collaborators

    vuepress-markdown-it-wikilink

    Wikimedia-style links for VuePress using the markdown-it parser.

    This plugin is intended to be used together with VuePress. If you are looking for a plugin to use for markdown-it only, please resolve to: kwvanderlinde/markdown-it-wikilinks.

    Installation

    Install this inside your VuePress project folder:

    # with yarn 
    yarn add vuepress-markdown-it-wikilink
     
    # with npm 
    npm i vuepress-markdown-it-wikilink

    And in your VuePress configuration file (most often in docs/.vuepress/config.js):

    const wikilinks = require('vuepress-markdown-it-wikilink')({
      // ... options here ...
    })
     
    module.exports = {
      // ...
      markdown: {
        extendMarkdown: (md) => {
          md.use(wikilinks)
        },
      },
      // ...
    }

    Options

    Options here defined will render as expected inside VuePress. Only the <a></a> tags are converted to <router-link></router-link> and hrefs are converted in format: to="href".

    Option Default value Note Example
    baseURL / The base URL for absolute wiki links. #baseurl
    relativeBaseURL / The base URL for relative wiki links. #relativeBaseURL
    makeAllLinksAbsolute false Render all wiki links as absolute links.
    uriSuffix .html Append this suffix to every URL. #uriSuffix
    htmlAttributes { class: 'wikilinks' } An object containing HTML attributes to be applied to every link. #htmlAttributes
    generatePageNameFromLabel Provide a custom page name generator. #generatePageNameFromLabel
    postProcessPageName A transform applied to every page name. #postProcessPageName
    postProcessLabel A transform applied to every link label. #postProcessLabel

    baseURL

    const html = require('markdown-it')()
      .use(require('vuepress-markdown-it-wikilink')({ baseURL: '/wiki/' }))
      .render('[[Main Page]]')
    // <p><router-link to="./wiki/Main_Page.html">Main Page</router-link></p>

    relativeBaseURL

    const html = require('markdown-it')()
      .use(require('vuepress-markdown-it-wikilink')({ relativeBaseURL: '#', suffix: '' }))
      .render('[[Main Page]]')
    // <p><router-link to="#Main_Page">Main Page</router-link></p>

    uriSuffix

    const html = require('markdown-it')()
      .use(require('vuepress-markdown-it-wikilink')({ uriSuffix: '.php' }))
      .render('[[Main Page]]')
    // <p><router-link to="./Main_Page.php">Main Page</router-link></p>

    htmlAttributes

    const attrs = {
      class: 'wikilink',
      rel: 'nofollow',
    }
    const html = require('markdown-it')()
      .use(require('vuepress-markdown-it-wikilink')({ htmlAttributes: attrs }))
      .render('[[Main Page]]')
    // <p><router-link to="./Main_Page.html" class="wikilink" rel="nofollow">Main Page</router-link></p>

    generatePageNameFromLabel

    Unless otherwise specified, the labels of the links are used as the targets. This means that a non-piped link such as [[Slate]] will point to the Slate page on your website. But say you wanted a little more flexibility - like being able to have [[Slate]], [[slate]], [[SLATE]] and [[Slate!]] to all point to the same page. Well, you can do this by providing your own custom generatePageNameFromLabel function.

    Example

    const _ = require('lodash')
     
    function myCustomPageNameGenerator(label) {
      return label.split('/').map(function (pathSegment) {
        // clean up unwanted characters, normalize case and capitalize the first letter
        pathSegment = _.deburr(pathSegment)
        pathSegment = pathSegment.replace(/[^\w\s]/g, '')
     
        // normalize case
        pathSegment = _.capitalize(pathSegment.toLowerCase())
     
        return pathSegment
      })
    }
     
    const html = require('markdown-it')()
      .use(
        require('vuepress-markdown-it-wikilink')({
          generatePageNameFromLabel: myCustomPageNameGenerator,
        })
      )
      .render('Vive la [[révolution!]] VIVE LA [[RÉVOLUTION!!!]]')
    // <p>Vive la <router-link to="./Revolution.html">révolution!</router-link> VIVE LA <router-link to="./Revolution.html">RÉVOLUTION!!!</router-link></p>

    Please note that the generatePageNameFromLabel function does not get applied for piped links such as [[/Misc/Cats/Slate|kitty]] since those already come with a target.

    postProcessPageName

    A transform applied to every page name. You can override it just like generatePageNameFromLabel (see above). The default transform does the following things:

    • trim surrounding whitespace
    • sanitize the string
    • replace spaces with underscores

    postProcessLabel

    A transform applied to every link label. You can override it just like generatePageNameFromLabel (see above). All the default transform does is trim surrounding whitespace.

    Credits

    Based on markdown-it-ins by Vitaly Puzrin, Alex Kocharin. Some adjustments are applied according to this fork: ceilfors/markdown-it-wikilinks.


    vuepress-markdown-it-wikilink ©Spencer Woo. Released under the MIT License.

    Authored and maintained by Spencer Woo.

    @Portfolio · @Blog · @GitHub

    Install

    npm i vuepress-markdown-it-wikilink

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar