What is the highlight_keywords MarkdownIt plugin for?

devonzuegel · 23 December 2019 01:33

While investigating how to Resize images, I was poking around the MarkdownIt plugins and couldn’t quite figure out how the higlight_keywords plugin is used.

github.com

laurent22/joplin/blob/master/ReactNativeClient/lib/renderers/MdToHtml.js#L150


		//    Using the `context` object, a plugin can send back either CSS strings (in .css) or CSS files that need
		//    to be loaded (in .cssFiles). In general, the desktop app will load the CSS files and the mobile app
		//    will load the CSS strings.


		markdownIt.use(rules.image(context, ruleOptions));
		markdownIt.use(rules.checkbox(context, ruleOptions));
		markdownIt.use(rules.link_open(context, ruleOptions));
		markdownIt.use(rules.html_image(context, ruleOptions));
		if (Setting.value('markdown.plugin.katex')) markdownIt.use(rules.katex(context, ruleOptions));
		if (Setting.value('markdown.plugin.fountain')) markdownIt.use(rules.fountain(context, ruleOptions));
		markdownIt.use(rules.highlight_keywords(context, ruleOptions));
		markdownIt.use(rules.code_inline(context, ruleOptions));
		markdownIt.use(markdownItAnchor, { slugify: uslugify });


		for (let key in plugins) {
			if (Setting.value(`markdown.plugin.${key}`)) markdownIt.use(plugins[key].module, plugins[key].options);
		}


		setupLinkify(markdownIt);


		const renderedBody = markdownIt.render(body);

I think the problem is I don’t see where the keywords are set. At first I thought it was what handled the highlight functionality when using the Find tool, but after fiddling around a bit I don’t think it’s that.

I’m mostly just curious, so I can build a better understanding of the codebase.

metbril · 23 December 2019 06:33

I guess it’s for syntax highlighting of code?

CalebJohn · 23 December 2019 07:22

highlight_keywords is a plugin defined in lib/renderers/MdToHtml/rules/highlight_keywords.js it is used to highlight words that match search queries. I would also have thought it would be from the find tool, but it might just be the full database search?

Take a look line 813 in ReactNativeClient/lib/components/screens/note.js for an example of where the keyword list is created.

And here is an example of how it looks on my computer (with joplin as the search term)

laurent · 23 December 2019 10:06

@CalebJohn is correct, it’s indeed a plugin that wraps the given keywords in a .highlighted-keyword SPAN tag, so that they can be highlighted with CSS.

If you make changes to this class or other MdToHtml classes, please keep in mind that they are being moved to a separate repository. Probably it will still be easy to merge any change you might make, but maybe something to keep in mind. That new repo is there in case you want to check if your changes will be affected by the refactoring: https://github.com/laurent22/joplin-renderer

Topic		Replies	Views
Replacing highlight.js by CodeMirror to highlight code (#4132)) Development	0	649	9 April 2021
Refresh userstyles.css / userchrome.css without relaunch Features	0	204	15 January 2024
Manually start markdown rendering Plugins	15	756	23 October 2021
Default Formatter for Code Block Support	5	3220	13 July 2019
Week 3 Report Mobile Editor Improvements gsoc-2022 , weekly , report	2	484	28 June 2022

What is the highlight_keywords MarkdownIt plugin for?

Related Topics