Markdown to Habrml

Convert markdown to habrahabr.ru html

by rumkin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
  <div class="navbar">
    <button onclick="convert()">
      <i class="fa fa-code"></i>
      Конвертировать
    </button>
    <button id="copy" data-clipboard-target="#habrml">
      <i class="fa fa-copy"></i>
      Копировать
    </button>
  </div>
  <div id="editor"></div>
  <pre id="habrml"></pre>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}

#editor {
  width: 100%;
  height: 300px;
}

#habrml {
  border: 1px solid #eee;
  padding: 20px;
  background-color: #fff;
}

.navbar {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

button {
  padding: 5px 7px;
  border: none;
  /* border-radius: 3px; */
  background: #fff;
}

.navbar button {
  margin: -10px 0;
}

.navbar button:hover {
  border-bottom: 3px solid #09f;
  margin-bottom: -7px;
}

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/solarized_light");
editor.getSession().setMode("ace/mode/markdown");
editor.setValue(localStorage.getItem('markdown') || '');
editor.getSession().on('change', function(e) {
    // e.type, etc
    localStorage.setItem('markdown', editor.getValue());
});
    
var renderer= new marked.Renderer();

renderer.heading = function(text, level) {
	return `\n<h${level}>` + text + `</h${level}>\n`;
};

renderer.paragraph = function(text) {
	return text + '\n\n';
};

renderer.blockquote = function(text) {
	return '<blockquote>' + text + '</blockquote>\n\n';
};

renderer.code = function(code ,lang) {
	return '<source language="' + lang + '">' + code + '</source>\n';
};

renderer.list = function(body, ordered) {
	if (ordered) {
  	return '<ol>\n' + body + '</ol>\n\n';
  } else {
  	return '<ul>\n' + body + '</ul>\n\n';
  }
};

window.convert = function() {
	document.querySelector('#habrml').innerText = marked(editor.getValue(), {renderer: renderer});
}

new Clipboard('#copy', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});