JSFiddle - React, Tailwind, and code Playground

by tsureishi

HTML

<textarea id="mkdwn"></textarea>
<div id="html">
</div>

CSS

textarea {
  width: 500px;
  height: 300px;
}

JavaScript

$('#mkdwn').on('keyup', function() {
	var mkdwn = $('#mkdwn').val();
	$('#html').html(mkdwnToHtml(mkdwn));
});

/* ここから */
var blocks = {
	'heading': /^(#{1,6}) +(.+)$/
}

function mkdwnToHtml(src) {
	return Lexer.lex(src);
}

// *********************
// 字句解析
// *********************

function Lexer() {
	this.lexicons = [];
}

// Static Method
Lexer.lex = function(src) {
	var lexer = new Lexer();
  return lexer.lex(src);
}

Lexer.prototype.lex = function(src) {
  // preprocess
	src = src
    .replace(/\r\n|\r/g, '\n')
    .replace(/\t/g, '    ')
    .replace(/\u00a0/g, ' ')
    .replace(/\u2424/g, '\n');
  
  var lines = src.split('\n');
  for (var i = 1; i <= lines.length; i++) {
    var line = lines[i];
    // heading
    var mathces;
    if ((matches = blocks['heading'].exec(line)) !== null) {
      src = 'ok';
    }
  } 
  
  return src;
}