Chat system frontend

a markdown chatter

by Brenton Strine

HTML

<script src="https://cdn.jsdelivr.net/markdown-it/7.0.1/markdown-it.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.4.3/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.26.0/commonmark.min.js"></script>
<div class="chat">
<div class="chat-messages"></div>
<textarea class="chat-message-input"></textarea>
</div>

CSS

.chat-messages { height: 200px; 
overflow: scroll;}

textarea, 
.chat-messages { 
background-color: #fff;
}

.chat-messages {
  background-color: #fff;
}

textarea {
  width: calc(100% - 20px);
  height: 3em;
}

.message { width: 19%; border: solid 1px blue; float: left;}
.message p {
  margin: 0 0 .5em 0;
}
.avatar { margin-left: -35px; margin-bottom: calc(-30px - 3px);
width: 30px; height: 30px; background-color: blue;
}
.name { font-weight: bold;}
.timestamp { text-decoration: italic; }

img { width: 100%;}

.divider { width : 100%; border-top: solid 1px gray; clear: both; margin: 5px 0;}

JavaScript

console.clear();
var MarkdownIt = window.markdownit({
  breaks:       true,
  langPrefix:   'language-',
  linkify:      true,
  typographer:  false
});
var Showdown = new showdown.Converter();
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: true,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});
var Remark = new Remarkable({
  html:         false,        // Enable HTML tags in source
  xhtmlOut:     false,        // Use '/' to close single tags (<br />)
  breaks:       true,        // Convert '\n' in paragraphs into <br>
  langPrefix:   'language-',  // CSS language prefix for fenced blocks
  linkify:      false,        // Autoconvert URL-like text to links

  // Enable some language-neutral replacement + quotes beautification
  typographer:  false,

  // Double + single quotes replacement pairs, when typographer enabled,
  // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
  quotes: '“”‘’',

  // Highlighter function. Should return escaped HTML,
  // or '' if the source string is not changed
  highlight: function (/*str, lang*/) { return ''; }
});
var reader = new commonmark.Parser();
var Commonmark = new commonmark.HtmlRenderer();

$(function(){

$(".chat").on("keydown", ".chat-message-input", function(e){
        if (e.keyCode == 13) {
          if (e.shiftKey !== true) {

             e.preventDefault();
var msgPre = '<div class="message"><div class="meta"><span class="name">';
var msgPre2 = '</span></div>';
var typed = this.value;
var commonMark = Commonmark.render(reader.parse(typed));
var markd     = marked(typed);
var markdownIt = MarkdownIt.render(typed);
var remarkable = Remark.render(typed);
var showdown   = Showdown.makeHtml(typed);

$(".chat-messages")
  .append(msgPre + "commonMark" + msgPre2 + commonMark +  "</div>")
  .append(msgPre + "marked" + msgPre2 + markd +  "</div>")
  .append(msgPre + "markdown-it" + msgPre2 + markdownIt +  "</div>")
 ...