Codimd: Embed markdownlint

[koppor]

@DavidAnson created a real nice markdown linter: https://github.com/DavidAnson/markdownlint. See a demo at https://dlaa.me/markdownlint/.

In Visual Studio Code, it displays as follows:

One can also disable certain rules inline: <!-- markdownlint-disable MD003 MD022 MD033 -->

For reference: MD003 MD022 MD033

This somehow refs https://github.com/hackmdio/codimd/issues/311. However, This issue is about markdown, not the YAML header.

[DavidAnson]

Thanks, @koppor ! If you decide to use markdownlint and have any issues, I can try to help.

[Yukaii]

This is interesting! The editor of CodiMD is built on top of CodeMirror, which already has some linter addons out there:

• https://github.com/codemirror/CodeMirror/blob/master/demo/lint.html (Official jshint example)
• https://github.com/brigand/codemirror-lint-eslint/blob/master/eslint-lint.js (Eslint integration)
• https://github.com/glayzzle/codemirror-linter/blob/master/addon/lint/php-lint.js (PHP lint)

All we need to to is:

1. Write a markdownlint codemirror addon
2. Plug into CodiMD
3. Add a status bar item (TBD) to toggle this functionality

[Yukaii]

A quick PoC!

[Yukaii]

Hi @DavidAnson, I've opened a PR for this feature and I have some findings to share with.

I bundled markdownlint with webpack's NormalModuleReplacementPlugin

    new webpack.NormalModuleReplacementPlugin(
      /^url$/,
      path.resolve(__dirname, './public/js/url.js')
    )

and the content of url.js is:

exports.URL = window.URL

It seems a little bit hacky but it should do the same thing as markdown-it-stub.js does. I also notice that markdownlint already provide build-demo command for frontend build.

Is there any plan to distribute markdownlint-browser.js with npm module? This will make us use markdownlint in frontend JavaScript more easily. Thank you.

[DavidAnson]

@yukaii I thought the front-end build was only really useful for my demo app, so don’t include it in the npm package. If you confirm the markdownlint-browser.js file that’s created today by the build-demo script is useful in this scenario, I’m happy to include it in the next release!

[Yukaii]

Verified it's working via additional markdown-it stub and webpack script-loader:

window.markdownit = require('markdown-it')
require('script-loader!markdownlint')

resolve: {
  alias: {
    markdownlint: path.join(__dirname, 'public/vendor/markdownlint-browser.min.js')
  }
}

@DavidAnson Yes please add it to next release 😍

[DavidAnson]

Great, thank you for checking! I will add that file in the next release.

[DavidAnson]

Update: markdownlint-browser.js should be available in the npm package for markdownlint with the next release.