an example mithril code for a markdown editor (with bootstrap 4 CSS classes) that auto-translates and syncs the scrolls

mithrilMarkdownEditorModel.js

"use strict"
const m = require("mithril")

const Sample = {
  currentMark: `# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading


## Horizontal Rules

___

---

***


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~


## Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


## Lists

Unordered

+ Create a list by starting a line with \`+\`, \`-\`, or \`*\`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as \`1.\`

Start numbering with offset:

57. foo
1. bar


## Code

Inline \`code\`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

\`\`\`
Sample text here...
\`\`\`


## Links

[link text](//markgger.herokuapp.com)

[link with title](//github.com/dgkim5360/markgger "title text!")

Autoconverted link https://markgger.herokuapp.com (enable linkify to see)`,
  setCurrentMark: function(value) {
    Sample.currentMark = value
  },
}
module.exports = Sample

mithrilMarkdownEditorView.js

"use strict"
const marked = require("marked")
const m = require("mithril")

// model
const Sample = require("mithrilMarkdownEditorModel")

// scroll sync with pure javascript
let flagRight = false
let flagLeft = false

function syncScrollToRight() {
  const leftDom = document.getElementById("mark")
  const rightDom = document.getElementById("marked")
  if (!flagRight) {
    flagLeft = true
    rightDom.scrollTop = leftDom.scrollTop
  }
  flagRight = false
}
function syncScrollToLeft() {
  const leftDom = document.getElementById("mark")
  const rightDom = document.getElementById("marked")
  if (!flagLeft) {
    flagRight = true
    leftDom.scrollTop = rightDom.scrollTop
  }
  flagLeft = false
}

const SyncControl = {
  flag: true,
  setSync: function(v) {
    SyncControl.flag = v
  },
}

// view
module.exports = {
  view: function(vnode) {
    return [
      m(".sync-control.text-right", [
        m("label.custom-control.custom-checkbox", [
          m("span.custom-control-description", "Sync the scroll bars"),
          m("input.custom-control-input[type=checkbox]", {
            checked: SyncControl.flag,
            oninput: m.withAttr("checked", SyncControl.setSync),
          }),
          m("span.custom-control-indicator"),
        ]),
      ]),
      m(".row", [
        m(".col-sm-6", [
          m("textarea.form-control#mark", {
            rows: 30,
            value: Sample.currentMark,
            oninput: m.withAttr("value", Sample.setCurrentMark),
            onscroll: SyncControl.flag? syncScrollToRight: null,
          })
        ]),
        m(".col-sm-6",
          m("#marked", {
            style: {height: "39em", "overflow-y": "scroll"},
            onscroll: SyncControl.flag? syncScrollToLeft: null,
          }, m.trust(marked(Sample.currentMark)))
        ),
      ])
    ]
  },
}