<cm></cm>でいくつでも複製可能、web componentが期待されている点はこの辺。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.js"></script>
<script src="//gnjo.github.io/riot.js"></script>
<cm></cm>
<cm></cm>
<cm></cm>
<cm></cm>
<cm></cm>
<cm></cm>
riot.tag(`cm`
,`<form><textarea ref="code"></textarea></form>
<style>.CodeMirror {
border: 1px solid #eee;
height: auto;
} cm+cm>form{margin-top:1rem}</style>
`
,function(opt){
let cm=null,C=CodeMirror;
this.on('mount',function(){
console.log('in')
cm = C.fromTextArea(this.refs.code,{lineNumbers: true,viewportMargin: Infinity});
})
})
;
riot.mount('cm',{})
注意
riot.tag(tag,html,css,constructor)
riot.tagの第三引数にはcssを入れることが出来るが、headの末尾に挿入されてしまう。component化しているのだからscopedで入れて欲しい所だが、仕様のようなのでhtmlの中に<style></style>を入れる。
riot.tag(...,...<style>
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
</style>,...)