CodeMirrorでMarkdownのモードを自作。の失敗作。 -> [そこそこ動く作](https://github.com/macrat/codemirror-mymarkdown)

mymarkdown.html

<script src=http://unpkg.com/codemirror></script>
<script src=http://unpkg.com/codemirror/mode/python/python.js></script>
<script src=http://unpkg.com/codemirror/mode/markdown/markdown.js></script>
<script src=http://unpkg.com/codemirror/addon/mode/simple.js></script>
<link rel=stylesheet href=http://unpkg.com/codemirror/lib/codemirror.css />

<style>
.cm-header {
	display: inline-block;
	padding: .5em 0 .3em;
}
.cm-header-1 {
	font-size: 2em;
}
.cm-header-2 {
	font-size: 1.7em;
}
.cm-header-3 {
	font-size: 1.5em;
}
.cm-header-4 {
	font-size: 1.3em;
}
.cm-header-5, .cm-header-6, .cm-header-6over {
	font-size: 1.1em;
}

.CodeMirror .cm-mark {
	color: #bbb;
}
.CodeMirror .cm-body {
	color: black;
}

.cm-strong.cm-mark, .cm-em.cm-mark {
	color: #666;
}

.cm-link.cm-link-alt {
	color: #77b;
}
.cm-link.cm-link-href {
	color: #00f;
}
.cm-link.cm-link-alt.cm-mark, .cm-link.cm-link-href.cm-mark {
	color: #66b;
}

.cm-code.cm-code-type {
	color: #6a6;
}

.cm-list.cm-mark {
	color: black;
}
.cm-list.cm-body {
	color: #900;
}
</style>

<div id=app>
</div>

<div id=exp>
</div>

<script>
CodeMirror.defineSimpleMode('mymark', {
	start: [
		{regex: /(# +)(.*)$/, sol: true, token: ['header header-1 mark', 'header header-1 body']},
		{regex: /(## +)(.*)$/, sol: true, token: ['header header-2 mark', 'header header-2 body']},
		{regex: /(### +)(.*)$/, sol: true, token: ['header header-3 mark', 'header header-3 body']},
		{regex: /(#### +)(.*)$/, sol: true, token: ['header header-4 mark', 'header header-4 body']},
		{regex: /(##### +)(.*)$/, sol: true, token: ['header header-5 mark', 'header header-5 body']},
		{regex: /(###### +)(.*)$/, sol: true, token: ['header header-6 mark', 'header header-6 body']},
		{regex: /(#######+ +)(.*)$/, sol: true, token: ['header header-6over mark', 'header header-6over body']},

		{regex: /(\*\*)(.*?)(\*\*)/, token: ['strong mark', 'strong body', 'strong mark']},
		{regex: /(__)(.*?)(__)/, token: ['strong mark', 'strong body', 'strong mark']},
		{regex: /(\*)(.*?)(\*)/, token: ['em mark', 'em body', 'em mark']},
		{regex: /(_)(.*?)(_)/, token: ['em mark', 'em body', 'em mark']},

		{regex: /(\[)(.*?)(\])(\()(.*?)(\))/, token: ['link link-alt mark', 'link link-alt body', 'link link-alt mark', 'link link-href mark', 'link link-href body', 'link link-href mark']},

		{regex: /([-*] +)(.+)$/, token: ['list mark', 'list body'], indent: true},

		{regex: /(``` *)(.*)$/, sol: true, token: ['code mark', 'code code-type'], mode: {spec: 'python', end: /```$/, presistent: true}},
	],
});

const cm = new CodeMirror(document.querySelector('#app'), {
	value: '# hello world\nthis is **markdown**\n## test test\nabc_def_\n**hello**world*abc**\n\nthis is [link](/path/to)\n\n``` python\ndef main():\n    return "hello"\n```\n',
	mode: 'mymark',
});

const cm2 = new CodeMirror(document.querySelector('#exp'), {
	value: '# hello world\nthis is **markdown**\n## test test\nabc_def_\n**hello**world*abc**\n\nthis is [link](/path/to)\n\n``` python\ndef main():\n    return "hello"\n```\n',
	mode: 'markdown',
});
</script>