Options
All
  • Public
  • Public/Protected
  • All
Menu

ContentScriptType

Index

Enumeration members

Enumeration members

CodeMirrorPlugin

CodeMirrorPlugin: = "codeMirrorPlugin"

Registers a new CodeMirror plugin, which should follow the template below.

module.exports = {
    default: function(context) {
        return {
            plugin: function(CodeMirror) {
                // ...
            },
            codeMirrorResources: [],
            codeMirrorOptions: {
                                 // ...
                      },
            assets: {
                // ...
            },
        }
    }
}
  • The context argument is currently unused but could be used later on to provide access to your own plugin so that the content script and plugin can communicate.

  • The plugin key is your CodeMirror plugin. This is where you can register new commands with CodeMirror or interact with the CodeMirror instance as needed.

  • The codeMirrorResources key is an array of CodeMirror resources that will be loaded and attached to the CodeMirror module. These are made up of addons, keymaps, and modes. For example, for a plugin that want's to enable clojure highlighting in code blocks. codeMirrorResources would be set to ['mode/clojure/clojure'].

  • The codeMirrorOptions key contains all the CodeMirror options that will be set or changed by this plugin. New options can alse be declared via CodeMirror.defineOption, and then have their value set here. For example, a plugin that enables line numbers would set codeMirrorOptions to {'lineNumbers': true}.

  • Using the optional assets key you may specify only CSS assets that should be loaded in the rendered HTML document. Check for example the Joplin [Mermaid plugin](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml/rules/mermaid.ts) to see how the data should be structured.

One of the plugin, codeMirrorResources, or codeMirrorOptions keys must be provided for the plugin to be valid. Having multiple or all provided is also okay.

See the demo plugin for an example of all these keys being used in one plugin.

MarkdownItPlugin

MarkdownItPlugin: = "markdownItPlugin"

Registers a new Markdown-It plugin, which should follow the template below.

module.exports = {
    default: function(context) {
        return {
            plugin: function(markdownIt, options) {
                // ...
            },
            assets: {
                // ...
            },
        }
    }
}

See the demo for a simple Markdown-it plugin example.

Exported members

  • The context argument is currently unused but could be used later on to provide access to your own plugin so that the content script and plugin can communicate.

  • The required plugin key is the actual Markdown-It plugin - check the [official doc](https://github.com/markdown-it/markdown-it) for more information. The options parameter is of type RuleOptions, which contains a number of options, mostly useful for Joplin's internal code.

  • Using the optional assets key you may specify assets such as JS or CSS that should be loaded in the rendered HTML document. Check for example the Joplin [Mermaid plugin](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml/rules/mermaid.ts) to see how the data should be structured.

Passing messages from the content script to your plugin

The application provides the following function to allow executing commands from the rendered HTML code:

webviewApi.executeCommand(commandName, ...args)

So you can use this mechanism to pass messages from the note viewer to your own plugin. To do so you would define a command, using joplin.commands.register, then you would call this command using the webviewApi object. See again the demo to see how this can be done.

Registering an existing Markdown-it plugin

To include a regular Markdown-It plugin, that doesn't make use of any Joplin-specific features, you would simply create a file such as this:

module.exports = {
    default: function(context) {
        return {
            plugin: require('markdown-it-toc-done-right');
        }
    }
}