[Test] markdown-it.js

by Codi Bezouka-Smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js
"></script>
<body>
	<form role="form">
		<h1>input</h1>
		<p id="input"></p>
		
		<h1>output</h1>
		<p id="output"></p>
	</form>
</body>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;700&family=Roboto:wght@300;400;700&display=swap');

$font-archivo: 'Archivo', sans-serif;
$font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
$font-roboto: 'Roboto', sans-serif;

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

body {
	margin: 0 auto;
	max-width: 75%;
}

.input {
	font-family: $font-mono;
}

.output {
	font-family: $font-roboto;
}

textarea {
	border: 1px solid #000;
	margin-top: 15px;
	padding: 4px 8px;
	width: 100%;
}

h1 {
	font-family: $font-archivo;
	margin: 15px 0;
}

JavaScript

const fns = {
	dom: {
		input: {
			el: () => { return document.getElementById('input') },
			html: (str) => { document.getElementById('input').innerHTML = str; },
		},
		output: {
			el: () => { return document.getElementById('output') },
			html: () => { return fns.dom.output.el().innerHTML },
		},
	},
	strings: {
		one: () => {
			return '**bold text** and *italic text*. \n[My Twitter](https://twitter.com/codibez) \n ![Github Logo](https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png) \n ```<h1>code</h1>```';
		},
		two: () => {
			return '**bold text** and *italic text*.  \n  [My Twitter](https://twitter.com/codibez)  \n  ```<!-- comment -->```';
		},
		three: () => {
			return '
				some text
			';
		},
	},
};

// enable everything
const md = markdownit({
  html: true,
  linkify: true,
  typographer: true,
	highlight: (str, lang) => {
		if (lang && hljs.getLanguage(lang)) {
			try {
				return hljs.highlight(str, { language: lang }).value;
			} catch (__) {}
		}
		return '';
	}
});

fns.dom.input.html(fns.strings.three());
fns.dom.output.html(fns.markdown.md.render(fns.strings.three()))