1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-09 08:45:55 +02:00
joplin/packages/renderer
2023-10-31 16:53:47 +00:00
..
assets build files 2023-10-24 15:49:48 +01:00
lib All: Use Lerna to manage monorepo 2020-11-05 16:58:23 +00:00
MdToHtml Mobile: Add support for drawing pictures (#7588) 2023-10-02 15:15:51 +01:00
tests Tools: Cleaned up tests and splitted sync tests into smaller parts 2020-12-01 18:05:24 +00:00
Tools All: Use Lerna to manage monorepo 2020-11-05 16:58:23 +00:00
vendor All: Use Lerna to manage monorepo 2020-11-05 16:58:23 +00:00
.gitignore All: Use Lerna to manage monorepo 2020-11-05 16:58:23 +00:00
assetsToHeaders.js Tools: Implement "prefer-object-spread" eslint rule 2023-06-01 12:02:36 +01:00
defaultNoteStyle.js Desktop: Better handling of bold text to simplify customisation (#5732) 2021-12-28 09:57:34 +00:00
headerAnchor.ts Server: Added Help page for Joplin Cloud 2021-08-31 13:46:46 +01:00
highlight.ts Chore: Optimize highlight.js package size 2022-05-26 16:46:56 +01:00
HtmlToHtml.test.ts Desktop: Fixes #8485: Note imported from Web Clipper is broken after being saved from the Rich Text editor 2023-07-26 17:37:24 +01:00
HtmlToHtml.ts Desktop: Fixes #8485: Note imported from Web Clipper is broken after being saved from the Rich Text editor 2023-07-26 17:37:24 +01:00
htmlUtils.test.ts Desktop: Resolves #8691: Improve pasting content from Word and Excel (#8705) 2023-08-21 18:37:33 +01:00
htmlUtils.ts Desktop: Allow attaching a file from the Markdown editor for HTML notes 2023-10-31 16:53:47 +00:00
index.ts Server: Added Help page for Joplin Cloud 2021-08-31 13:46:46 +01:00
InMemoryCache.ts Tools: Apply eslint rule @typescript-eslint/no-inferrable-types with ignoreArguments=false 2023-06-30 09:11:26 +01:00
jest.config.js Chore: Renderer: Refactor and test long-press and click handlers (#7774) 2023-02-17 13:13:28 +00:00
MarkupToHtml.ts Desktop: Sanitize rendered output in safe mode (#8507) 2023-07-19 13:09:03 +01:00
MdToHtml.ts Mobile: Add support for drawing pictures (#7588) 2023-10-02 15:15:51 +01:00
noteStyle.ts Desktop: New Embedded Pdf Viewer (#6681) 2022-08-04 10:12:22 +01:00
package.json Update dependency katex to v0.16.9 (#9117) 2023-10-23 00:20:13 +00:00
pathUtils.ts Tools: Apply eslint rule @typescript-eslint/no-inferrable-types with ignoreArguments=false 2023-06-30 09:11:26 +01:00
publish.sh Tools: Fixed npm publish 2021-12-27 18:02:18 +01:00
README.md Server: Add support for sharing notes via a link 2021-01-29 18:45:11 +00:00
stringUtils.js Tools: Implement "prefer-object-spread" eslint rule 2023-06-01 12:02:36 +01:00
tsconfig.json Mobile: Add support for drawing pictures (#7588) 2023-10-02 15:15:51 +01:00
urlUtils.js All: Use Lerna to manage monorepo 2020-11-05 16:58:23 +00:00
utils.ts Server: Add support for sharing notes via a link 2021-01-29 18:45:11 +00:00

Joplin Renderer

This is the renderer used by Joplin to render notes in Markdown or HTML format.

Installation

npm i -s joplin-renderer

Certain plugins require additional assets like CSS, fonts, etc. These assets are in the /assets directory and should be copied to wherever the application can find them at runtime.

Usage

const { MarkupToHtml } = require('joplin-renderer');

const options = {};

// The notes are rendered using the provided theme. The supported theme properties are in `defaultNoteStyle.js`
// and this is what is used if no theme is provided. A `theme` object can be provided to override default theme
// properties.
const theme = {};

const markdown = "Testing `MarkupToHtml` renderer";

const markupToHtml = new MarkupToHtml(options);
const result = await markupToHtml.render(MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN, markdown, theme, options);

console.info('HTML:', result.html);
console.info('Plugin assets:', result.pluginAssets);

When calling render(), an object with the following properties is returned:

  • html: The rendered HTML code
  • pluginAssets: The assets required by the plugins

The assets need to be loaded by the calling application. For example this is how they are loaded in the Joplin desktop application:

function loadPluginAssets(assets) {
	for (let i = 0; i < assets.length; i++) {
		const asset = assets[i];

		if (asset.mime === 'text/css') {
			const link = document.createElement('link');
			link.rel = 'stylesheet';
			link.href = 'pluginAssets/' + asset.name;
			document.getElementById('joplin-container-styleContainer').appendChild(link);
		}
	}
}

Development

Updating a markdown-it plugin

Whenever updating a Markdown-it plugin, such as Katex or Mermaid, make sure to run npm run buildAssets, which will compile the CSS and JS for use in the Joplin applications.

Adding asset files

A plugin (or rule) can have any number of assets, such as CSS or font files, associated with it. To add an asset to a plugin, follow these steps:

  • Add the file under /assets/PLUGIN_NAME/your-asset-file.css
  • Register this file within the plugin using context.pluginAssets[PLUGIN_NAME] = [{ name: 'your-asset-file.css' }]

See katex.js for an example of how this is done.

Adding inline CSS

A plugin can ask for some CSS to be included inline in the rendered HTML. This is convenient as it means no extra file needs to be packaged. Use this syntax to do this:

context.pluginAssets[PLUGIN_NAME] = [
	{
		inline: true,
		text: ".my-css { background-color: 'green' }",
		mime: 'text/css',
	},
];