Mercurial
diff .cms/lib/codemirror/demo/indentwrap.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.cms/lib/codemirror/demo/indentwrap.html Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,59 @@ +<!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> + .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} + .CodeMirror pre > * { text-indent: 0px; } + </style> +<div id=nav> + <a href="https://codemirror.net/5"><h1>CodeMirror</h1><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/codemirror/codemirror5">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>