Markdown editor
Markdown renderer and editor in browser in frontend development could be useful for many applications for content authoring.
markdown-it package
#install markdown-it
npm install markdown-it
#install markdown-it addons
npm install markdown-it-abbr markdown-it-container markdown-it-deflist markdown-it-emoji markdown-it-footnote markdown-it-ins markdown-it-mark markdown-it-sub markdown-it-sup
#install highlighter for markdown
npm install highlight.js
Setting up for markdown editing
Add a javascript file, for example myjs.js as shown,
'use strict';
const MarkdownIt = require('markdown-it');
module.exports.mdHtml = new MarkdownIt()
.use(require('markdown-it-abbr'))
.use(require('markdown-it-container'), 'warning')
.use(require('markdown-it-deflist'))
.use(require('markdown-it-emoji'))
.use(require('markdown-it-footnote'))
.use(require('markdown-it-ins'))
.use(require('markdown-it-mark'))
.use(require('markdown-it-sub'))
.use(require('markdown-it-sup'));
Now we can wrap this javascript for browser and use it our html web app.
For instance in Svelte we can do the following,
<script>
import md from "./myjs.js";
let src = 'markdown content';
$:markdown = md.render(src);
};
</script>
<textarea bind:value={source} />
<div>{markdown}</div>
Synchronized scrolling
This is a rather interesting subject. This sample project I did, implements it using the scheme used in markdown-it demo. VS code uses something probably similar, but they have more feature. VS code source is worth exploring to learn more.
Every time the content is updated, the demo injects the line numbers in the
generated content using injectLineNumbers. Next, buildScrollMap builds a
map of line number versus position using a hidden element, sourceLikeDiv.
This map is used by the following scroll handlers,
syncSrcScroll: handler that monitors generated content scroll position and synchronizes the markdown source position.syncResultScroll: handler that monitors markdown source content scroll position and synchronizes the generated content position.
Showdown.js
- Github Showdown.js source.
- Code highlighting (showdown highlight js extension)[https://stackoverflow.com/questions/21785658/showdown-highlightjs-extension]
- Github Showdown highlighter source,
- Highlight.js, a general purpose highlighter, https://highlightjs.org/, Github source.
- Check showdown extensions, Github. To develop a new extension take a look at their template at github. There are other extensions, google it.
- Showdown extension writeup, https://github.com/showdownjs/ng-showdown/wiki/Creating-an-Extension.
Showdown use
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dev_cookbook</title>
<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
</head>
<body>
<script>
var div = document.createElement("DIV");
document.body.appendChild(div); // Append <button> to <body>
var converter = new showdown.Converter();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
div.innerHTML = converter.makeHtml(this.responseText);
}
};
xhttp.open("GET", "README.md", true);
xhttp.send();
</script>
</body>
</html>
Using a code editor for entering text
Instead of a text area to enter source, we an use a code editor.