mirror of
https://github.com/renbaoshuo/S2OJ.git
synced 2024-12-23 11:31:52 +00:00
96d4a3ecf7
Due to historical reasons, the code is in subfolder "1". With SVN removal, we place the code back and remove the annoying "1" folder.
60 lines
2.5 KiB
HTML
60 lines
2.5 KiB
HTML
<!doctype html>
|
|
|
|
<title>CodeMirror: Indented wrapped line demo</title>
|
|
<meta charset="utf-8"/>
|
|
<link rel=stylesheet href="../doc/docs.css">
|
|
|
|
<link rel="stylesheet" href="../lib/codemirror.css">
|
|
<script src="../lib/codemirror.js"></script>
|
|
<script src="../mode/xml/xml.js"></script>
|
|
<style type="text/css">
|
|
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
|
|
.CodeMirror pre > * { text-indent: 0px; }
|
|
</style>
|
|
<div id=nav>
|
|
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
|
|
|
|
<ul>
|
|
<li><a href="../index.html">Home</a>
|
|
<li><a href="../doc/manual.html">Manual</a>
|
|
<li><a href="https://github.com/marijnh/codemirror">Code</a>
|
|
</ul>
|
|
<ul>
|
|
<li><a class=active href="#">Indented wrapped line</a>
|
|
</ul>
|
|
</div>
|
|
|
|
<article>
|
|
<h2>Indented wrapped line demo</h2>
|
|
<form><textarea id="code" name="code">
|
|
<!doctype html>
|
|
<body>
|
|
<h2 id="overview">Overview</h2>
|
|
|
|
<p>CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides <em>only</em> the editor component, no accompanying buttons, auto-completion, or other IDE functionality. It does provide a rich API on top of which such functionality can be straightforwardly implemented. See the <a href="#addons">add-ons</a> included in the distribution, and the <a href="https://github.com/jagthedrummer/codemirror-ui">CodeMirror UI</a> project, for reusable implementations of extra features.</p>
|
|
|
|
<p>CodeMirror works with language-specific modes. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. The distribution comes with a number of modes (see the <a href="../mode/"><code>mode/</code></a> directory), and it isn't hard to <a href="#modeapi">write new ones</a> for other languages.</p>
|
|
</body>
|
|
</textarea></form>
|
|
|
|
<p>This page uses a hack on top of the <code>"renderLine"</code>
|
|
event to make wrapped text line up with the base indentation of
|
|
the line.</p>
|
|
|
|
<script>
|
|
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
|
lineNumbers: true,
|
|
lineWrapping: true,
|
|
mode: "text/html"
|
|
});
|
|
var charWidth = editor.defaultCharWidth(), basePadding = 4;
|
|
editor.on("renderLine", function(cm, line, elt) {
|
|
var off = CodeMirror.countColumn(line.text, null, cm.getOption("tabSize")) * charWidth;
|
|
elt.style.textIndent = "-" + off + "px";
|
|
elt.style.paddingLeft = (basePadding + off) + "px";
|
|
});
|
|
editor.refresh();
|
|
</script>
|
|
|
|
</article>
|