it wors fine, but i'm trying to use codemirror to style the code, maybe i missed something.
i've installed npm codemirror:
import Page from "flarum/components/Page";
import IndexPage from "flarum/components/IndexPage";
import listItems from "flarum/helpers/listItems";
import CodeMirror from "codemirror";
/* global m */
export function refresh(){
const codemirrorEditor = CodeMirror.fromTextArea(document.getElementById('editor-text'), {
lineNumbers: true,
mode: "javascript",
theme: "base16-dark",
});
if (codemirrorEditor)
document.getElementById('output').srcdoc = document.getElementById('editor-text').value;
}
export default class RealTimeEditor extends Page {
view() {
return m(".IndexPage", [
IndexPage.prototype.hero(),
m('.container', m('.sideNavContainer', [
m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
m('.IndexPage-results.sideNavOffset',[
m("div", {className:"hometitle"},
m("h1", {className:"maintitle"},
"Html Editor"
)
),
m("div", {className:"mainpar"},
m("p", {className: "desc"},
"This Html editor support HTML/Css code, simply write your code and see the result in real time in the output box"
)
),
m("div", {className:"main"},
[
m("textarea", {id:"editor-text",onkeyup:refresh,placeholder:"Type or paste your code here..."}),
m("iframe", {id:"output"})
]
)
]),
]))
]);
}
}
but actually when i write sample code it appear like this
any advice for this?