Skip to content

Instantly share code, notes, and snippets.

@marijnh

marijnh/test.html

Created January 30, 2015 22:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marijnh/749ad49381ccabec675b to your computer and use it in GitHub Desktop.
Save marijnh/749ad49381ccabec675b to your computer and use it in GitHub Desktop.
Download ZIP
codemirror test
Raw
test.html
<!doctype html>
<script src="lib/codemirror.js"></script>
<link rel=stylesheet href="lib/codemirror.css">
<style>
.code-wrap {
width: 50%;
border: 2px solid red;
}</style>
<div class="top-boxes editor-parent">
<div id="box-html" class="box box-html" data-type="html">
<div class="code-wrap">
<pre id="html" class="code-box"><code><section id="features">
<h2>Features</h2>
<ul>
<li>Support for <a href="mode/index.html">over 60 languages</a> out of the box
</li><li>A powerful, <a href="mode/htmlmixed/index.html">composable</a> language mode <a href="doc/manual.html#modeapi">system</a>
</li><li><a href="doc/manual.html#addon_show-hint">Autocompletion</a> (<a href="demo/xmlcomplete.html">XML</a>)
</li><li><a href="doc/manual.html#addon_foldcode">Code folding</a>
</li><li><a href="doc/manual.html#option_extraKeys">Configurable</a> keybindings
</li><li><a href="demo/vim.html">Vim</a>, <a href="demo/emacs.html">Emacs</a>, and <a href="demo/sublime.html">Sublime Text</a> bindings
</li><li><a href="doc/manual.html#addon_search">Search and replace</a> interface
</li><li><a href="doc/manual.html#addon_matchbrackets">Bracket</a> and <a href="doc/manual.html#addon_matchtags">tag</a> matching
</li><li>Support for <a href="demo/buffers.html">split views</a>
</li><li><a href="doc/manual.html#addon_lint">Linter integration</a>
</li><li><a href="demo/variableheight.html">Mixing font sizes and styles</a>
</li><li><a href="demo/theme.html">Various themes</a>
</li><li>Able to <a href="demo/resize.html">resize to fit content</a>
</li><li><a href="doc/manual.html#mark_replacedWith">Inline</a> and <a href="doc/manual.html#addLineWidget">block</a> widgets
</li><li>Programmable <a href="demo/marker.html">gutters</a>
</li><li>Making ranges of text <a href="doc/manual.html#markText">styled, read-only, or atomic</a>
</li><li><a href="demo/bidi.html">Bi-directional text</a> support
</li><li>Many other <a href="doc/manual.html#api">methods</a> and <a href="doc/manual.html#addons">addons</a>...
</li></ul>
</section>
</code></pre>
<div class="error-bar" id="error-bar-html">
<span class="error-icon" data-type="html">
!
</span>
</div>
</div>
</div>
</div>
<script>
var elementToReplace = document.querySelector("#html");
var val = document.querySelector("code").innerHTML;
var editor = CodeMirror(function(elt) {
elementToReplace.parentNode.replaceChild(elt, elementToReplace);
}, {
value : val,
lineNumbers : true,
lineWrapping : true,
tabSize : 2,
indentWithTabs : false
});
editor.setOption("mode", { name: "xml", htmlMode: true });
// Simulates part of how CodePen sets height of editors.
editor.setSize(null, 200);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment