108 doc/internals.html
View file
@@ -1,25 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Internals</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
<style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>

<div class="grey">
<img src="baboon.png" class="logo" alt="logo"/>
<pre>
/* (Re-) Implementing A Syntax-
Highlighting Editor in JavaScript */
</pre>

<title>CodeMirror: Internals</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
<script src="activebookmark.js"></script>

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a href="#top">Introduction</a></li>
<li><a href="#approach">General Approach</a></li>
<li><a href="#input">Input</a></li>
<li><a href="#selection">Selection</a></li>
<li><a href="#update">Intelligent Updating</a></li>
<li><a href="#parse">Parsing</a></li>
<li><a href="#summary">What Gives?</a></li>
<li><a href="#btree">Content Representation</a></li>
<li><a href="#keymap">Key Maps</a></li>
</ul>
</div>

<div class="clear"><div class="leftbig blk">
<article>

<h2 id=top>(Re-) Implementing A Syntax-Highlighting Editor in JavaScript</h2>

<p style="font-size: 85%" id="intro">
<strong>Topic:</strong> JavaScript, code editor implementation<br>
@@ -103,7 +113,8 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
with <em>new</em> scary hacks in order to keep up. This was starting
to lose its appeal.</p>

<h2 id="approach">General Approach</h2>
<section id=approach>
<h2>General Approach</h2>

<p>What CodeMirror 2 does is try to sidestep most of the hairy hacks
that came up in version 1. I owe a lot to the
@@ -136,8 +147,9 @@ <h2 id="approach">General Approach</h2>
do the rest only when needed. (Fortunately, the <code>onscroll</code>
event works almost the same on all browsers, and lends itself well to
displaying things only as they are scrolled into view.)</p>

<h2 id="input">Input</h2>
</section>
<section id="input">
<h2>Input</h2>

<p>ACE uses its hidden textarea only as a text input shim, and does
all cursor movement and things like text deletion itself by directly
@@ -165,8 +177,9 @@ <h2 id="input">Input</h2>
<p>Of course, since only a small part of the document sits in the
textarea, keys like page up and ctrl-end won't do the right thing.
CodeMirror is catching those events and handling them itself.</p>

<h2 id="selection">Selection</h2>
</section>
<section id="selection">
<h2>Selection</h2>

<p>Getting and setting the selection range of a textarea in modern
browsers is trivial—you just use the <code>selectionStart</code>
@@ -213,8 +226,9 @@ <h2 id="selection">Selection</h2>
This, of course, doesn't work if the first time the key is used was
for extending an inverted selection, but it works most of the
time.</p>

<h2 id="update">Intelligent Updating</h2>
</section>
<section id="update">
<h2>Intelligent Updating</h2>

<p>One thing that always comes up when you have a complicated internal
state that's reflected in some user-visible external representation
@@ -274,8 +288,9 @@ <h2 id="update">Intelligent Updating</h2>
uses this to reset individual lines, the refresh updater builds an
HTML chunk for the whole visible document at once, and then uses a
single <code>innerHTML</code> update to do the refresh.</p>

<h2 id="parse">Parsers can be Simple</h2>
</section>
<section id="parse">
<h2>Parsers can be Simple</h2>

<p>When I wrote CodeMirror 1, I
thought <a href="http://codemirror.net/story.html#parser">interruptable
@@ -315,8 +330,9 @@ <h2 id="parse">Parsers can be Simple</h2>
manages some 1500 lines during that time on Chrome. All it has to do
is munge strings, so there is no real reason for it to be slow
anymore.</p>

<h2 id="summary">What Gives?</h2>
</section>
<section id="summary">
<h2>What Gives?</h2>

<p>Given all this, what can you expect from CodeMirror 2?</p>

@@ -368,8 +384,9 @@ <h2 id="summary">What Gives?</h2>
longer be current. I've left the text intact, but added markers at the
passages that are now inaccurate. The new situation is described
below.</p>

<h2 id="btree">Content Representation</h2>
</section>
<section id="btree">
<h2>Content Representation</h2>

<p>The original implementation of CodeMirror 2 represented the
document as a flat array of line objects. This worked well—splicing
@@ -419,8 +436,9 @@ <h2 id="btree">Content Representation</h2>
patterns that may result in a seriously unbalanced tree, but even such
an unbalanced tree will perform well, unless you spend a day making
strangely repeating edits to a really big document.</p>

<h2 id="keymap">Keymaps</h2>
</section>
<section id="keymap">
<h2>Keymaps</h2>

<p><a href="#approach">Above</a>, I claimed that directly catching key
events for things like cursor movement is impractical because it
@@ -482,24 +500,4 @@ <h2 id="keymap">Keymaps</h2>
is updated <em>during</em> composition. So we poll, whenever the
editor is focused, to provide immediate updates of the display.</p>

</div><div class="rightsmall blk">

<h2>Contents</h2>

<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#approach">General Approach</a></li>
<li><a href="#input">Input</a></li>
<li><a href="#selection">Selection</a></li>
<li><a href="#update">Intelligent Updating</a></li>
<li><a href="#parse">Parsing</a></li>
<li><a href="#summary">What Gives?</a></li>
<li><a href="#btree">Content Representation</a></li>
<li><a href="#keymap">Key Maps</a></li>
</ul>

</div></div>

<div style="height: 2em">&nbsp;</div>

</body></html>
</article>
BIN +11.7 KB doc/logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
147 doc/logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
180 doc/manual.html
View file
@@ -1,38 +1,63 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: User Manual</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold">
<link rel="stylesheet" type="text/css" href="docs.css">
<style>dl dl {margin: 0;}</style>
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../addon/runmode/runmode.js"></script>
<script src="../addon/runmode/colorize.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<style>
dt { text-indent: -1.5em; padding-left: 1.5em; }
</style>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>

<div class="grey">
<img src="baboon.png" class="logo" alt="logo">
<pre>
/* User manual and
reference guide */
</pre>

<title>CodeMirror: User Manual</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<script src="activebookmark.js"></script>

<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../addon/runmode/runmode.js"></script>
<script src="../addon/runmode/colorize.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<style>
dt { text-indent: -2em; padding-left: 2em; }
dd { margin-left: 1.5em; }
dl dl {margin: 0;}
</style>

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="#overview" class=active data-default="true">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a href="#usage">Basic Usage</a></li>
<li><a href="#config">Configuration</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#keymaps">Keymaps</a></li>
<li><a href="#styling">Customized Styling</a></li>
<li><a href="#api">Programming API</a>
<ul>
<li><a href="#api_constructor">Constructor</a></li>
<li><a href="#api_content">Content manipulation</a></li>
<li><a href="#api_selection">Selection</a></li>
<li><a href="#api_configuration">Configuration</a></li>
<li><a href="#api_doc">Document management</a></li>
<li><a href="#api_history">History</a></li>
<li><a href="#api_marker">Text-marking</a></li>
<li><a href="#api_decoration">Widget, gutter, and decoration</a></li>
<li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li>
<li><a href="#api_mode">Mode, state, and tokens</a></li>
<li><a href="#api_misc">Miscellaneous methods</a></li>
<li><a href="#api_static">Static properties</a></li>
</ul>
</li>
<li><a href="#addons">Addons</a></li>
<li><a href="#modeapi">Writing CodeMirror Modes</a></li>
</ul>
</div>

<div class="clear"><div class="leftbig blk">
<article>

<h2 id="overview">Overview</h2>
<section class=first id=overview>
<h2>User manual and reference guide</h2>

<p>CodeMirror is a code-editor component that can be embedded in
Web pages. The core library provides <em>only</em> the editor
@@ -50,8 +75,10 @@ <h2 id="overview">Overview</h2>
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>
</section>

<h2 id="usage">Basic Usage</h2>
<section id=usage>
<h2>Basic Usage</h2>

<p>The easiest way to use CodeMirror is to simply load the script
and style sheet found under <code>lib/</code> in the distribution,
@@ -107,7 +134,9 @@ <h2 id="usage">Basic Usage</h2>
of a form) is submitted. See the <a href="#fromTextArea">API
reference</a> for a full description of this method.</p>

<h2 id="config">Configuration</h2>
</section>
<section id=config>
<h2>Configuration</h2>

<p>Both the <a href="#CodeMirror"><code>CodeMirror</code></a>
function and its <code>fromTextArea</code> method take as second
@@ -315,7 +344,7 @@ <h2 id="config">Configuration</h2>

<dt id="option_cursorBlinkRate"><code><strong>cursorBlinkRate</strong>: number</code></dt>
<dd>Half-period in milliseconds used for cursor blinking. The default blink
rate is 530ms.</dd>
rate is 530ms. By setting this to zero, blinking can be disabled.</dd>

<dt id="option_cursorScrollMargin"><code><strong>cursorScrollMargin</strong>: number</code></dt>
<dd>How much extra space to always keep above and below the
@@ -372,8 +401,10 @@ <h2 id="config">Configuration</h2>
This <em>will</em> have bad effects on performance of big
documents.</dd>
</dl>
</section>

<h2 id="events">Events</h2>
<section id=events>
<h2>Events</h2>

<p>Various CodeMirror-related objects emit events, which allow
client code to react to various situations. Handlers for such
@@ -589,8 +620,10 @@ <h2 id="events">Events</h2>
or the line the widget is on require the widget to be
redrawn.</dd>
</dl>
</section>

<h2 id="keymaps">Keymaps</h2>
<section id=keymaps>
<h2>Keymaps</h2>

<p>Keymaps are ways to associate keys with functionality. A keymap
is an object mapping strings that identify the keys to functions
@@ -661,8 +694,10 @@ <h2 id="keymaps">Keymaps</h2>
to <code>true</code>, the default effect of inserting a character
will be suppressed when the keymap is active as the top-level
map.</p>
</section>

<h2 id="styling">Customized Styling</h2>
<section id=styling>
<h2>Customized Styling</h2>

<p>Up to a certain extent, CodeMirror's look can be changed by
modifying style sheet files. The style sheets supplied by modes
@@ -740,8 +775,10 @@ <h2 id="styling">Customized Styling</h2>
<p>Themes are also simply CSS files, which define colors for
various syntactic elements. See the files in
the <a href="../theme/"><code>theme</code></a> directory.</p>
</section>

<h2 id="api">Programming API</h2>
<section id=api>
<h2>Programming API</h2>

<p>A lot of CodeMirror features are only available through its
API. Thus, you need to write code (or
@@ -893,7 +930,7 @@ <h3 id="api_selection">Cursor and selection methods</h3>
<dd>Set the cursor position. You can either pass a
single <code>{line, ch}</code> object, or the line and the
character as two separate parameters.</dd>
<dt id="setSelection"><code><strong>doc.setSelection</strong>(anchor: {line, ch}, head: {line, ch})</code></dt>
<dt id="setSelection"><code><strong>doc.setSelection</strong>(anchor: {line, ch}, ?head: {line, ch})</code></dt>
<dd>Set the selection range. <code>anchor</code>
and <code>head</code> should be <code>{line, ch}</code>
objects. <code>head</code> defaults to <code>anchor</code> when
@@ -904,7 +941,7 @@ <h3 id="api_selection">Cursor and selection methods</h3>
will, if shift is held or
the <a href="#setExtending">extending</a> flag is set, move the
head of the selection while leaving the anchor at its current
place. <code>pos2</code> is optional, and can be passed to
place. <code>to</code> is optional, and can be passed to
ensure a region (for example a word or paragraph) will end up
selected (in addition to whatever lies between that region and
the current anchor).</dd>
@@ -1620,8 +1657,10 @@ <h3 id="api_static">Static properties</h3>
returned position will be the end of the changed
range, <em>after</em> the change is applied.</dd>
</dl>
</section>

<h2 id="addons">Addons</h2>
<section id=addons>
<h2>Addons</h2>

<p>The <code>addon</code> directory in the distribution contains a
number of reusable components that implement extra editor
@@ -1778,8 +1817,9 @@ <h2 id="addons">Addons</h2>
finds blocks in brace languages (JavaScript, C, Java,
etc), <code>CodeMirror.fold.indent</code>, for languages where
indentation determines block structure (Python, Haskell),
and <code>CodeMirror.fold.xml</code>, for XML-style
languages.</dd>
and <code>CodeMirror.fold.xml</code>, for XML-style languages,
and <code>CodeMirror.fold.comment</code>, for folding comment
blocks.</dd>
<dt><code><strong>widget</strong>: string|Element</code></dt>
<dd>The widget to show for folded ranges. Can be either a
string, in which case it'll become a span with
@@ -2060,7 +2100,7 @@ <h2 id="addons">Addons</h2>
editor instance to refresh its mode when the loading
succeeded. See the <a href="../demo/loadmode.html">demo</a>.</dd>

<dt id="addon_continuecomment"><a href="../addon/edit/continuecomment.js"><code>edit/continuecomment.js</code></a></dt>
<dt id="addon_continuecomment"><a href="../addon/comment/continuecomment.js"><code>comment/continuecomment.js</code></a></dt>
<dd>Adds an <code>continueComments</code> option, which can be
set to true to have the editor prefix new lines inside C-like
block comments with an asterisk when Enter is pressed. It can
@@ -2074,6 +2114,13 @@ <h2 id="addons">Addons</h2>
whenever it doesn't contain any text.
See <a href="../demo/placeholder.html">the demo</a>.</dd>

<dt id="addon_fullscreen"><a href="../addon/display/fullscreen.js"><code>display/fullscreen.js</code></a></dt>
<dd>Defines an option <code>fullScreen</code> that, when set
to <code>true</code>, will make the editor full-screen (as in,
taking up the whole browser window). Depends
on <a href="../addon/display/fullscreen.css"><code>fullscreen.css</code></a>. <a href="../demo/fullscreen.html">Demo
here</a>.</dd>

<dt id="addon_merge"><a href="../addon/merge/merge.js"><code>merge/merge.js</code></a></dt>
<dd>Implements an interface for merging changes, using either a
2-way or a 3-way view. The <code>CodeMirror.MergeView</code>
@@ -2088,8 +2135,10 @@ <h2 id="addons">Addons</h2>
will highlight changes between the editable document and the
original(s) (<a href="../demo/merge.html">demo</a>).</dd>
</dl>
</section>

<h2 id="modeapi">Writing CodeMirror Modes</h2>
<section id=modeapi>
<h2>Writing CodeMirror Modes</h2>

<p>Modes typically consist of a single JavaScript file. This file
defines, in the simplest case, a lexer (tokenizer) for your
@@ -2284,7 +2333,7 @@ <h2 id="modeapi">Writing CodeMirror Modes</h2>
state.</p>

<p id="innerMode">In a nested mode, it is recommended to add an
extra methods, <code>innerMode</code> which, given a state object,
extra method, <code>innerMode</code> which, given a state object,
returns a <code>{state, mode}</code> object with the inner mode
and its state for the current position. These are used by utility
scripts such as the <a href="#addon_closetag">tag closer</a> to
@@ -2318,43 +2367,8 @@ <h2 id="modeapi">Writing CodeMirror Modes</h2>
specifies the properties that should be added. This is mostly
useful to add utilities that can later be looked
up through <a href="#getMode"><code>getMode</code></a>.</p>
</section>

</div><div class="rightsmall blk">

<h2>Contents</h2>

<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#usage">Basic Usage</a></li>
<li><a href="#config">Configuration</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#keymaps">Keymaps</a></li>
<li><a href="#styling">Customized Styling</a></li>
<li><a href="#api">Programming API</a>
<ul>
<li><a href="#constructor">Constructor</a></li>
<li><a href="#api_content">Content manipulation</a></li>
<li><a href="#api_selection">Selection</a></li>
<li><a href="#api_configuration">Configuration</a></li>
<li><a href="#api_doc">Document management</a></li>
<li><a href="#api_history">History</a></li>
<li><a href="#api_marker">Text-marking</a></li>
<li><a href="#api_decoration">Widget, gutter, and decoration</a></li>
<li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li>
<li><a href="#api_mode">Mode, state, and tokens</a></li>
<li><a href="#api_misc">Miscellaneous methods</a></li>
<li><a href="#api_static">Static properties</a></li>
</ul>
</li>
<li><a href="#addons">Addons</a></li>
<li><a href="#modeapi">Writing CodeMirror Modes</a></li>
</ul>

</div></div>

<div style="height: 2em">&nbsp;</div>
</article>

<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>

</body>
</html>
100 doc/modes.html
View file

This file was deleted.

39 doc/realworld.html
View file
@@ -1,23 +1,26 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Real-world uses</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
<title>CodeMirror: Real-world Uses</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">

<div class="grey">
<img src="baboon.png" class="logo" alt="logo"/>
<pre>
/* Real world uses,
full list */
</pre>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Real-world uses</a>
</ul>
</div>

<article>

<h2>CodeMirror real-world uses</h2>

<p><a href="mailto:marijnh@gmail.com">Contact me</a> if you'd like
your project to be added to this list.</p>

@@ -57,6 +60,7 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<li><a href="http://blog.pamelafox.org/2012/02/interactive-html5-slides-with-fathomjs.html">FathomJS integration</a> (slides with editors, again)</li>
<li><a href="http://fiddlesalad.com/">Fiddle Salad</a> (web development environment)</li>
<li><a href="http://www.firepad.io">Firepad</a> (collaborative text editor)</li>
<li><a href="https://code.google.com/p/gerrit/">Gerrit</a>'s diff view</a></li>
<li><a href="http://tour.golang.org">Go language tour</a></li>
<li><a href="https://github.com/github/android">GitHub's Android app</a></li>
<li><a href="https://script.google.com/">Google Apps Script</a></li>
@@ -113,7 +117,8 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<li><a href="http://wordpress.org/extend/plugins/codemirror-for-codeeditor/">WordPress plugin</a></li>
<li><a href="http://www.xosystem.org/home/applications_websites/xosystem_website/xoside_EN.php">XOSide</a> (online editor)</li>
<li><a href="http://videlibri.sourceforge.net/cgi-bin/xidelcgi">XQuery tester</a></li>
<li><a href="http://q42jaap.github.io/xsd2codemirror/">xsd2codemirror</a> (convert XSD to CM XML completion info)</li>
</ul>

</body>
</html>
</article>

362 doc/oldrelease.html → doc/releases.html
View file

Large diffs are not rendered by default.

41 doc/reporting.html
View file
@@ -1,24 +1,26 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Reporting Bugs</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
<style>li { margin-top: 1em; }</style>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>

<div class="grey">
<img src="baboon.png" class="logo" alt="logo"/>
<pre>
/* Reporting bugs
effectively */
</pre>

<title>CodeMirror: Reporting Bugs</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Reporting bugs</a>
</ul>
</div>

<article>

<h2>Reporting bugs effectively</h2>

<div class="left">

<p>So you found a problem in CodeMirror. By all means, report it! Bug
@@ -56,5 +58,4 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi

</div>

</body>
</html>
</article>
48 doc/upgrade_v2.2.html
View file
@@ -1,36 +1,37 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Upgrading to v2.2</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>

<div class="grey">
<img src="baboon.png" class="logo" alt="logo"/>
<pre>
/* Upgrading to
v2.2 */
</pre>

<title>CodeMirror: Version 2.2 upgrade guide</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">2.2 upgrade guide</a>
</ul>
</div>

<div class="left">
<article>

<h2>Upgrading to v2.2</h2>

<p>There are a few things in the 2.2 release that require some care
when upgrading.</p>

<h2>No more default.css</h2>
<h3>No more default.css</h3>

<p>The default theme is now included
in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so
you do not have to included it separately anymore. (It was tiny, so
even if you're not using it, the extra data overhead is negligible.)

<h2>Different key customization</h2>
<h3>Different key customization</h3>

<p>CodeMirror has moved to a system
where <a href="manual.html#option_keyMap">keymaps</a> are used to
@@ -81,7 +82,7 @@ <h2>Different key customization</h2>
behaviors. Or you can write your own handler function to do something
different altogether.</p>

<h2>Tabs</h2>
<h3>Tabs</h3>

<p>Handling of tabs changed completely. The display width of tabs can
now be set with the <code>tabSize</code> option, and tabs can
@@ -92,7 +93,4 @@ <h2>Tabs</h2>
hard-wired into browsers. If you are relying on 8-space tabs, make
sure you explicitly set <code>tabSize: 8</code> in your options.</p>

</div>

</body>
</html>
</article>
135 doc/upgrade_v3.html
View file
@@ -1,32 +1,44 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Upgrading to v3</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../addon/runmode/runmode.js"></script>
<script src="../addon/runmode/colorize.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>

<div class="grey">
<img src="baboon.png" class="logo" alt="logo"/>
<pre>
/* Upgrading to
version 3 */
</pre>

<title>CodeMirror: Version 3 upgrade guide</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../addon/runmode/runmode.js"></script>
<script src="../addon/runmode/colorize.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<script src="activebookmark.js"></script>

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#upgrade">Upgrade guide</a>
<li><a href="#dom">DOM structure</a></li>
<li><a href="#gutters">Gutter model</a></li>
<li><a href="#events">Event handling</a></li>
<li><a href="#marktext">markText method arguments</a></li>
<li><a href="#folding">Line folding</a></li>
<li><a href="#lineclass">Line CSS classes</a></li>
<li><a href="#positions">Position properties</a></li>
<li><a href="#matchbrackets">Bracket matching</a></li>
<li><a href="#modes">Mode management</a></li>
<li><a href="#new">New features</a></li>
</ul>
</div>

<div class="clear"><div class="leftbig blk">
<article>

<h2 id=upgrade>Upgrading to version 3</h2>

<p>Version 3 does not depart too much from 2.x API, and sites that use
CodeMirror in a very simple way might be able to upgrade without
@@ -37,7 +49,8 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
Explorer 7</strong>. The editor will mostly work on that browser, but
it'll be significantly glitchy.</p>

<h2 id=dom>DOM structure</h2>
<section id=dom>
<h2>DOM structure</h2>

<p>This one is the most likely to cause problems. The internal
structure of the editor has changed quite a lot, mostly to implement a
@@ -53,8 +66,9 @@ <h2 id=dom>DOM structure</h2>

<p>See the <a href="manual.html#styling">styling section</a> of the
manual for more information.</p>

<h2 id=gutters>Gutter model</h2>
</section>
<section id=gutters>
<h2>Gutter model</h2>

<p>In CodeMirror 2.x, there was a single gutter, and line markers
created with <code>setMarker</code> would have to somehow coexist with
@@ -87,8 +101,9 @@ <h2 id=gutters>Gutter model</h2>
cm.setGutterMarker(0, "note-gutter", document.createTextNode("hi"));
&lt;/script>
</pre>

<h2 id=events>Event handling</h2>
</section>
<section id=events>
<h2>Event handling</h2>

<p>Most of the <code>onXYZ</code> options have been removed. The same
effect is now obtained by calling
@@ -107,8 +122,9 @@ <h2 id=events>Event handling</h2>
console.log("something changed! (" + change.origin + ")");
});
</pre>

<h2 id=marktext>markText method arguments</h2>
</section>
<section id=marktext>
<h2>markText method arguments</h2>

<p>The <a href="manual.html#markText"><code>markText</code></a> method
(which has gained some interesting new features, such as creating
@@ -124,8 +140,9 @@ <h2 id=marktext>markText method arguments</h2>
atomic: true
});
</pre>

<h2 id=folding>Line folding</h2>
</section>
<section id=folding>
<h2>Line folding</h2>

<p>The interface for hiding lines has been
removed. <a href="manual.html#markText"><code>markText</code></a> can
@@ -146,8 +163,9 @@ <h2 id=folding>Line folding</h2>
console.log("boom");
});
</pre>

<h2 id=lineclass>Line CSS classes</h2>
</section>
<section id=lineclass>
<h2>Line CSS classes</h2>

<p>The <code>setLineClass</code> method has been replaced
by <a href="manual.html#addLineClass"><code>addLineClass</code></a>
@@ -160,8 +178,9 @@ <h2 id=lineclass>Line CSS classes</h2>
cm.removeLineClass(marked, "background", "highlighted-line");
});
</pre>

<h2 id=positions>Position properties</h2>
</section>
<section id=positions>
<h2>Position properties</h2>

<p>All methods that take or return objects that represent screen
positions now use <code>{left, top, bottom, right}</code> properties
@@ -171,23 +190,26 @@ <h2 id=positions>Position properties</h2>
<p>Affected methods
are <a href="manual.html#cursorCoords"><code>cursorCoords</code></a>, <a href="manual.html#charCoords"><code>charCoords</code></a>, <a href="manual.html#coordsChar"><code>coordsChar</code></a>,
and <a href="manual.html#getScrollInfo"><code>getScrollInfo</code></a>.</p>

<h2 id=matchbrackets>Bracket matching no longer in core</h2>
</section>
<section id=matchbrackets>
<h2>Bracket matching no longer in core</h2>

<p>The <a href="manual.html#addon_matchbrackets"><code>matchBrackets</code></a>
option is no longer defined in the core editor.
Load <code>addon/edit/matchbrackets.js</code> to enable it.</p>

<h2 id=modes>Mode management</h2>
</section>
<section id=modes>
<h2>Mode management</h2>

<p>The <code>CodeMirror.listModes</code>
and <code>CodeMirror.listMIMEs</code> functions, used for listing
defined modes, are gone. You are now encouraged to simply
inspect <code>CodeMirror.modes</code> (mapping mode names to mode
constructors) and <code>CodeMirror.mimeModes</code> (mapping MIME
strings to mode specs).</p>

<h2 id=new>New features</h2>
</section>
<section id=new>
<h2>New features</h2>

<p>Some more reasons to upgrade to version 3.</p>

@@ -202,26 +224,7 @@ <h2 id=new>New features</h2>
<li>Defining custom options
with <a href="manual.html#defineOption"><code>CodeMirror.defineOption</code></a>.</li>
</ul>

</div><div class="rightsmall blk">

<h2>Contents</h2>

<ul>
<li><a href="#dom">DOM structure</a></li>
<li><a href="#gutters">Gutter model</a></li>
<li><a href="#events">Event handling</a></li>
<li><a href="#folding">Line folding</a></li>
<li><a href="#marktext">markText method arguments</a></li>
<li><a href="#lineclass">Line CSS classes</a></li>
<li><a href="#positions">Position properties</a></li>
<li><a href="#matchbrackets">Bracket matching</a></li>
<li><a href="#modes">Mode management</a></li>
<li><a href="#new">New features</a></li>
</ul>

</div></div>
</section>
</article>

<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
</body>
</html>
636 index.html
View file

Large diffs are not rendered by default.

5 keymap/vim.js
View file
@@ -1104,6 +1104,11 @@
if (vim.visualLine) {
if (cursorIsBefore(selectionStart, selectionEnd)) {
selectionStart.ch = 0;

var lastLine = cm.lastLine();
if (selectionEnd.line > lastLine) {
selectionEnd.line = lastLine;
}
selectionEnd.ch = lineLength(cm, selectionEnd.line);
} else {
selectionEnd.ch = 0;
1 lib/codemirror.css
View file
@@ -95,6 +95,7 @@

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

86 lib/codemirror.js
View file
@@ -24,7 +24,7 @@ window.CodeMirror = (function() {
// This is woefully incomplete. Suggestions for alternative methods welcome.
var mobile = ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
var mac = ios || /Mac/.test(navigator.platform);
var windows = /windows/i.test(navigator.platform);
var windows = /win/i.test(navigator.platform);

var opera_version = opera && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
if (opera_version) opera_version = Number(opera_version[1]);
@@ -332,13 +332,19 @@ window.CodeMirror = (function() {
d.scrollbarV.style.bottom = needsH ? scrollbarWidth(d.measure) + "px" : "0";
d.scrollbarV.firstChild.style.height =
(scrollHeight - d.scroller.clientHeight + d.scrollbarV.clientHeight) + "px";
} else d.scrollbarV.style.display = "";
} else {
d.scrollbarV.style.display = "";
d.scrollbarV.firstChild.style.height = "0";
}
if (needsH) {
d.scrollbarH.style.display = "block";
d.scrollbarH.style.right = needsV ? scrollbarWidth(d.measure) + "px" : "0";
d.scrollbarH.firstChild.style.width =
(d.scroller.scrollWidth - d.scroller.clientWidth + d.scrollbarH.clientWidth) + "px";
} else d.scrollbarH.style.display = "";
} else {
d.scrollbarH.style.display = "";
d.scrollbarH.firstChild.style.width = "0";
}
if (needsH && needsV) {
d.scrollbarFiller.style.display = "block";
d.scrollbarFiller.style.height = d.scrollbarFiller.style.width = scrollbarWidth(d.measure) + "px";
@@ -455,7 +461,7 @@ window.CodeMirror = (function() {
var positionsChangedFrom = Infinity;
if (cm.options.lineNumbers)
for (var i = 0; i < changes.length; ++i)
if (changes[i].diff) { positionsChangedFrom = changes[i].from; break; }
if (changes[i].diff && changes[i].from < positionsChangedFrom) { positionsChangedFrom = changes[i].from; }

var end = doc.first + doc.size;
var from = Math.max(visible.from - cm.options.viewportMargin, doc.first);
@@ -612,7 +618,7 @@ window.CodeMirror = (function() {
if (nextIntact && nextIntact.to == lineN) nextIntact = intact.shift();
if (lineIsHidden(cm.doc, line)) {
if (line.height != 0) updateLineHeight(line, 0);
if (line.widgets && cur.previousSibling) for (var i = 0; i < line.widgets.length; ++i) {
if (line.widgets && cur && cur.previousSibling) for (var i = 0; i < line.widgets.length; ++i) {
var w = line.widgets[i];
if (w.showIfHidden) {
var prev = cur.previousSibling;
@@ -871,9 +877,10 @@ window.CodeMirror = (function() {
clearInterval(display.blinker);
var on = true;
display.cursor.style.visibility = display.otherCursor.style.visibility = "";
display.blinker = setInterval(function() {
display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
}, cm.options.cursorBlinkRate);
if (cm.options.cursorBlinkRate > 0)
display.blinker = setInterval(function() {
display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
}, cm.options.cursorBlinkRate);
}

// HIGHLIGHT WORKER
@@ -924,8 +931,8 @@ window.CodeMirror = (function() {
// smallest indentation, which tends to need the least context to
// parse correctly.
function findStartLine(cm, n, precise) {
var minindent, minline, doc = cm.doc;
for (var search = n, lim = n - 100; search > lim; --search) {
var minindent, minline, doc = cm.doc, maxScan = cm.doc.mode.innerMode ? 1000 : 100;
for (var search = n, lim = n - maxScan; search > lim; --search) {
if (search <= doc.first) return doc.first;
var line = getLine(doc, search - 1);
if (line.stateAfter && (!precise || search <= doc.frontier)) return search;
@@ -940,7 +947,7 @@ window.CodeMirror = (function() {

function getStateBefore(cm, n, precise) {
var doc = cm.doc, display = cm.display;
if (!doc.mode.startState) return true;
if (!doc.mode.startState) return true;
var pos = findStartLine(cm, n, precise), state = pos > doc.first && getLine(doc, pos-1).stateAfter;
if (!state) state = startState(doc.mode);
else state = copyState(doc.mode, state);
@@ -1090,6 +1097,7 @@ window.CodeMirror = (function() {
if (cur.measureRight) rect.right = getRect(cur.measureRight).left;
if (cur.leftSide) rect.leftSide = measureRect(getRect(cur.leftSide));
}
removeChildren(cm.display.measure);
for (var i = 0, cur; i < data.length; ++i) if (cur = data[i]) {
finishRect(cur);
if (cur.leftSide) finishRect(cur.leftSide);
@@ -1442,6 +1450,10 @@ window.CodeMirror = (function() {
function readInput(cm) {
var input = cm.display.input, prevInput = cm.display.prevInput, doc = cm.doc, sel = doc.sel;
if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.state.disableInput) return false;
if (cm.state.pasteIncoming && cm.state.fakedLastChar) {
input.value = input.value.substring(0, input.value.length - 1);
cm.state.fakedLastChar = false;
}
var text = input.value;
if (text == prevInput && posEq(sel.from, sel.to)) return false;
if (ie && !ie_lt9 && cm.display.inputHasSelection === text) {
@@ -1588,12 +1600,22 @@ window.CodeMirror = (function() {
on(d.scroller, "dragover", drag_);
on(d.scroller, "drop", operation(cm, onDrop));
}
on(d.scroller, "paste", function(e){
on(d.scroller, "paste", function(e) {
if (eventInWidget(d, e)) return;
focusInput(cm);
fastPoll(cm);
});
on(d.input, "paste", function() {
// Workaround for webkit bug https://bugs.webkit.org/show_bug.cgi?id=90206
// Add a char to the end of textarea before paste occur so that
// selection doesn't span to the end of textarea.
if (webkit && !cm.state.fakedLastChar && !(new Date - cm.state.lastMiddleDown < 200)) {
var start = d.input.selectionStart, end = d.input.selectionEnd;
d.input.value += "$";
d.input.selectionStart = start;
d.input.selectionEnd = end;
cm.state.fakedLastChar = true;
}
cm.state.pasteIncoming = true;
fastPoll(cm);
});
@@ -1657,6 +1679,7 @@ window.CodeMirror = (function() {
if (captureMiddleClick) onContextMenu.call(cm, cm, e);
return;
case 2:
if (webkit) cm.state.lastMiddleDown = +new Date;
if (start) extendSelection(cm.doc, start);
setTimeout(bind(focusInput, cm), 20);
e_preventDefault(e);
@@ -2060,8 +2083,8 @@ window.CodeMirror = (function() {
function onKeyDown(e) {
var cm = this;
if (!cm.state.focused) onFocus(cm);
if (ie && e.keyCode == 27) { e.returnValue = false; }
if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
if (ie && e.keyCode == 27) e.returnValue = false;
var code = e.keyCode;
// IE does strange things with escape.
cm.doc.sel.shift = code == 16 || e.shiftKey;
@@ -2098,7 +2121,10 @@ window.CodeMirror = (function() {
cm.state.focused = true;
if (cm.display.wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
cm.display.wrapper.className += " CodeMirror-focused";
resetInput(cm, true);
if (!cm.curOp) {
resetInput(cm, true);
if (webkit) setTimeout(bind(resetInput, cm, true), 0); // Issue #1730
}
}
slowPoll(cm);
restartBlink(cm);
@@ -3729,9 +3755,10 @@ window.CodeMirror = (function() {
TextMarker.prototype.changed = function() {
var pos = this.find(), cm = this.doc.cm;
if (!pos || !cm) return;
var line = getLine(this.doc, pos.from.line);
if (this.type != "bookmark") pos = pos.from;
var line = getLine(this.doc, pos.line);
clearCachedMeasurement(cm, line);
if (pos.from.line >= cm.display.showingFrom && pos.from.line < cm.display.showingTo) {
if (pos.line >= cm.display.showingFrom && pos.line < cm.display.showingTo) {
for (var node = cm.display.lineDiv.firstChild; node; node = node.nextSibling) if (node.lineObj == line) {
if (node.offsetHeight != line.height) updateLineHeight(line, node.offsetHeight);
break;
@@ -4394,11 +4421,13 @@ window.CodeMirror = (function() {
if (size) {
builder.measure[builder.pos] = widget;
} else {
var elt = builder.measure[builder.pos] = zeroWidthElement(builder.cm.display.measure);
if (marker.type != "bookmark" || marker.insertLeft)
builder.pre.insertBefore(elt, widget);
var elt = zeroWidthElement(builder.cm.display.measure);
if (marker.type == "bookmark" && !marker.insertLeft)
builder.measure[builder.pos] = builder.pre.appendChild(elt);
else if (builder.measure[builder.pos])
return;
else
builder.pre.appendChild(elt);
builder.measure[builder.pos] = builder.pre.insertBefore(elt, widget);
}
builder.measuredSomething = true;
}
@@ -4422,7 +4451,7 @@ window.CodeMirror = (function() {
if (nextChange == pos) { // Update current marker set
spanStyle = spanEndStyle = spanStartStyle = title = "";
collapsed = null; nextChange = Infinity;
var foundBookmark = null;
var foundBookmarks = [];
for (var j = 0; j < spans.length; ++j) {
var sp = spans[j], m = sp.marker;
if (sp.from <= pos && (sp.to == null || sp.to > pos)) {
@@ -4436,14 +4465,15 @@ window.CodeMirror = (function() {
} else if (sp.from > pos && nextChange > sp.from) {
nextChange = sp.from;
}
if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmark = m;
if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmarks.push(m);
}
if (collapsed && (collapsed.from || 0) == pos) {
buildCollapsedSpan(builder, (collapsed.to == null ? len : collapsed.to) - pos,
collapsed.marker, collapsed.from == null);
if (collapsed.to == null) return collapsed.marker.find();
}
if (foundBookmark && !collapsed) buildCollapsedSpan(builder, 0, foundBookmark);
if (!collapsed && foundBookmarks.length) for (var j = 0; j < foundBookmarks.length; ++j)
buildCollapsedSpan(builder, 0, foundBookmarks[j]);
}
if (pos >= len) break;

@@ -4739,11 +4769,11 @@ window.CodeMirror = (function() {
if (extend) extendSelection(this, pos);
else setSelection(this, pos, pos);
}),
setSelection: docOperation(function(anchor, head) {
setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor));
setSelection: docOperation(function(anchor, head, bias) {
setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor), bias);
}),
extendSelection: docOperation(function(from, to) {
extendSelection(this, clipPos(this, from), to && clipPos(this, to));
extendSelection: docOperation(function(from, to, bias) {
extendSelection(this, clipPos(this, from), to && clipPos(this, to), bias);
}),

getSelection: function(lineSep) {return this.getRange(this.sel.from, this.sel.to, lineSep);},
@@ -5791,7 +5821,7 @@ window.CodeMirror = (function() {

// THE END

CodeMirror.version = "3.15.0";
CodeMirror.version = "3.16.0";

return CodeMirror;
})();
41 mode/apl/index.html
View file
@@ -1,20 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: APL mode</title>
<link rel="stylesheet" href="../../doc/docs.css">
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="./apl.js"></script>
<style>

<title>CodeMirror: APL mode</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="../../addon/edit/matchbrackets.js"></script>
<script src="./apl.js"></script>
<style>
.CodeMirror { border: 2px inset #dee; }
</style>
</head>
<body>
<h1>CodeMirror: APL mode</h1>
<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 href="../index.html">Language modes</a>
<li><a class=active href="#">APL</a>
</ul>
</div>

<article>
<h2>APL mode</h2>
<form><textarea id="code" name="code">
⍝ Conway's game of life

@@ -57,5 +69,4 @@ <h1>CodeMirror: APL mode</h1>
have popups etc.</p>

<p><strong>MIME types defined:</strong> <code>text/apl</code> (APL code)</p>
</body>
</html>
</article>
42 mode/asterisk/index.html
View file
@@ -1,20 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Asterisk dialplan mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="asterisk.js"></script>
<style>

<title>CodeMirror: Asterisk dialplan mode</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="asterisk.js"></script>
<style>
.CodeMirror {border: 1px solid #999;}
.cm-s-default span.cm-arrow { color: red; }
</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Asterisk dialplan mode</h1>
<form><textarea id="code" name="code">
<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 href="../index.html">Language modes</a>
<li><a class=active href="#">Asterisk dialplan</a>
</ul>
</div>

<article>
<h2>Asterisk dialplan mode</h2>
<form><textarea id="code" name="code">
; extensions.conf - the Asterisk dial plan
;

@@ -138,5 +151,4 @@ <h1>CodeMirror: Asterisk dialplan mode</h1>

<p><strong>MIME types defined:</strong> <code>text/x-asterisk</code>.</p>

</body>
</html>
</article>
130 mode/clike/index.html
View file
@@ -1,19 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: C-like mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="clike.js"></script>
<link rel="stylesheet" href="../../doc/docs.css">
<style>.CodeMirror {border: 2px inset #dee;}</style>
</head>
<body>
<h1>CodeMirror: C-like mode</h1>

<form><textarea id="code" name="code">

<title>CodeMirror: C-like mode</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="../../addon/edit/matchbrackets.js"></script>
<script src="clike.js"></script>
<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">C-like</a>
</ul>
</div>

<article>
<h2>C-like mode</h2>

<div><textarea id="c-code">
/* C demo code */

#include <zmq.h>
@@ -79,14 +92,94 @@ <h1>CodeMirror: C-like mode</h1>
pthread_detach(thread);
return context;
}
</textarea></form>
</textarea></div>

<h2>C++ example</h2>

<div><textarea id="cpp-code">
#include <iostream>
#include "mystuff/util.h"

namespace {
enum Enum {
VAL1, VAL2, VAL3
};

int Helper(const MyType& param) {
return 0;
}
} // namespace

class ForwardDec;

template <class T, class V>
class Class : public BaseClass {
const MyType<T, V> member_;

public:
const MyType<T, V>& Method() const {
return member_;
}

void Method2(MyType<T, V>* value);
}

template <class T, class V>
void Class::Method2(MyType<T, V>* value) {
std::out << 1 >> method();
value->Method3(member_);
member_ = value;
}
</textarea></div>

<h2>Java example</h2>

<div><textarea id="java-code">
import com.demo.util.MyType;
import com.demo.util.MyInterface;

public enum Enum {
VAL1, VAL2, VAL3
}

public class Class<T, V> implements MyInterface {
public static final MyType<T, V> member;

private class InnerClass {
public int zero() {
return 0;
}
}

@Override
public MyType method() {
return member;
}

public void method2(MyType<T, V> value) {
method();
value.method3();
member = value;
}
}
</textarea></div>

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
var editor = CodeMirror.fromTextArea(document.getElementById("c-code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-csrc"
});
var editor = CodeMirror.fromTextArea(document.getElementById("cpp-code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-c++src"
});
var javaEditor = CodeMirror.fromTextArea(document.getElementById("java-code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-java"
});
</script>

<p>Simple mode that tries to handle C-like languages as well as it
@@ -99,5 +192,4 @@ <h1>CodeMirror: C-like mode</h1>
(C code), <code>text/x-c++src</code> (C++
code), <code>text/x-java</code> (Java
code), <code>text/x-csharp</code> (C#).</p>
</body>
</html>
</article>
54 mode/clike/scala.html
View file
@@ -1,29 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: C-like mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<link rel="stylesheet" href="../../theme/ambiance.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="clike.js"></script>
<link rel="stylesheet" href="../../doc/docs.css">
<style>
body
{
margin: 0;
padding: 0;
max-width:inherit;
height: 100%;
}
html, form, .CodeMirror, .CodeMirror-scroll
{
height: 100%;
}
</style>
</head>
<body>

<title>CodeMirror: Scala mode</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../../doc/docs.css">

<link rel="stylesheet" href="../../lib/codemirror.css">
<link rel="stylesheet" href="../../theme/ambiance.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="clike.js"></script>
<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 href="../index.html">Language modes</a>
<li><a class=active href="#">Scala</a>
</ul>
</div>

<article>
<h2>Scala mode</h2>
<form>
<textarea id="code" name="code">

@@ -763,5 +764,4 @@
mode: "text/x-scala"
});
</script>
</body>
</html>
</article>
42 mode/clojure/index.html
View file
@@ -1,17 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Clojure mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="clojure.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Clojure mode</h1>
<form><textarea id="code" name="code">

<title>CodeMirror: Clojure mode</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="clojure.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">Clojure</a>
</ul>
</div>

<article>
<h2>Clojure mode</h2>
<form><textarea id="code" name="code">
; Conway's Game of Life, based on the work of:
;; Laurent Petit https://gist.github.com/1200343
;; Christophe Grand http://clj-me.cgrand.net/2011/08/19/conways-game-of-life
@@ -72,5 +85,4 @@ <h1>CodeMirror: Clojure mode</h1>

<p><strong>MIME types defined:</strong> <code>text/x-clojure</code>.</p>

</body>
</html>
</article>
85 mode/cobol/index.html
View file
@@ -1,44 +1,60 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: COBOL mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="cobol.js"></script>
<link rel="stylesheet" href="../../theme/neat.css">
<link rel="stylesheet" href="../../theme/elegant.css">
<link rel="stylesheet" href="../../theme/erlang-dark.css">
<link rel="stylesheet" href="../../theme/night.css">
<link rel="stylesheet" href="../../theme/monokai.css">
<link rel="stylesheet" href="../../theme/cobalt.css">
<link rel="stylesheet" href="../../theme/eclipse.css">
<link rel="stylesheet" href="../../theme/rubyblue.css">
<link rel="stylesheet" href="../../theme/lesser-dark.css">
<link rel="stylesheet" href="../../theme/xq-dark.css">
<link rel="stylesheet" href="../../theme/xq-light.css">
<link rel="stylesheet" href="../../theme/ambiance.css">
<link rel="stylesheet" href="../../theme/blackboard.css">
<link rel="stylesheet" href="../../theme/vibrant-ink.css">
<link rel="stylesheet" href="../../theme/solarized.css">
<link rel="stylesheet" href="../../theme/twilight.css">
<link rel="stylesheet" href="../../theme/midnight.css">
<link rel="stylesheet" href="../../addon/dialog/dialog.css">
<script src="../../addon/selection/active-line.js"></script>
<script src="../../addon/search/search.js"></script>
<script src="../../addon/dialog/dialog.js"></script>
<script src="../../addon/search/searchcursor.js"></script>
<style>

<title>CodeMirror: COBOL mode</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../../doc/docs.css">

<link rel="stylesheet" href="../../lib/codemirror.css">
<link rel="stylesheet" href="../../theme/neat.css">
<link rel="stylesheet" href="../../theme/elegant.css">
<link rel="stylesheet" href="../../theme/erlang-dark.css">
<link rel="stylesheet" href="../../theme/night.css">
<link rel="stylesheet" href="../../theme/monokai.css">
<link rel="stylesheet" href="../../theme/cobalt.css">
<link rel="stylesheet" href="../../theme/eclipse.css">
<link rel="stylesheet" href="../../theme/rubyblue.css">
<link rel="stylesheet" href="../../theme/lesser-dark.css">
<link rel="stylesheet" href="../../theme/xq-dark.css">
<link rel="stylesheet" href="../../theme/xq-light.css">
<link rel="stylesheet" href="../../theme/ambiance.css">
<link rel="stylesheet" href="../../theme/blackboard.css">
<link rel="stylesheet" href="../../theme/vibrant-ink.css">
<link rel="stylesheet" href="../../theme/solarized.css">
<link rel="stylesheet" href="../../theme/twilight.css">
<link rel="stylesheet" href="../../theme/midnight.css">
<link rel="stylesheet" href="../../addon/dialog/dialog.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="cobol.js"></script>
<script src="../../addon/selection/active-line.js"></script>
<script src="../../addon/search/search.js"></script>
<script src="../../addon/dialog/dialog.js"></script>
<script src="../../addon/search/searchcursor.js"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
font-size : 20px;
height : auto !important;
}
.CodeMirror-activeline-background {background: #555555 !important;}
</style>
</head>
<body>
<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 href="../index.html">Language modes</a>
<li><a class=active href="#">COBOL</a>
</ul>
</div>

<article>
<h2>COBOL mode</h2>

<p> Select Theme <select onchange="selectTheme()" id="selectTheme">
<option>default</option>
<option>ambiance</option>
@@ -191,5 +207,4 @@
}
}
</script>
</body>
</html>
</article>
22 mode/coffeescript/LICENSE
View file

This file was deleted.

42 mode/coffeescript/index.html
View file
@@ -1,17 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: CoffeeScript mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="coffeescript.js"></script>
<style>.CodeMirror {border-top: 1px solid silver; border-bottom: 1px solid silver;}</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: CoffeeScript mode</h1>
<form><textarea id="code" name="code">

<title>CodeMirror: CoffeeScript mode</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="coffeescript.js"></script>
<style>.CodeMirror {border-top: 1px solid silver; border-bottom: 1px solid silver;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">CoffeeScript</a>
</ul>
</div>

<article>
<h2>CoffeeScript mode</h2>
<form><textarea id="code" name="code">
# CoffeeScript mode for CodeMirror
# Copyright (c) 2011 Jeff Pickhardt, released under
# the MIT License.
@@ -724,5 +737,4 @@ <h1>CodeMirror: CoffeeScript mode</h1>

<p>The CoffeeScript mode was written by Jeff Pickhardt (<a href="LICENSE">license</a>).</p>

</body>
</html>
</article>
42 mode/commonlisp/index.html
View file
@@ -1,17 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Common Lisp mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="commonlisp.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Common Lisp mode</h1>
<form><textarea id="code" name="code">(in-package :cl-postgres)

<title>CodeMirror: Common Lisp mode</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="commonlisp.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">Common Lisp</a>
</ul>
</div>

<article>
<h2>Common Lisp mode</h2>
<form><textarea id="code" name="code">(in-package :cl-postgres)

;; These are used to synthesize reader and writer names for integer
;; reading/writing functions when the amount of bytes and the
@@ -161,5 +174,4 @@ <h1>CodeMirror: Common Lisp mode</h1>

<p><strong>MIME types defined:</strong> <code>text/x-common-lisp</code>.</p>

</body>
</html>
</article>
40 mode/css/css.js
View file
@@ -366,8 +366,8 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
"drop-initial-before-align", "drop-initial-size", "drop-initial-value",
"elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
"flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
"float", "float-offset", "font", "font-feature-settings", "font-family",
"font-kerning", "font-language-override", "font-size", "font-size-adjust",
"float", "float-offset", "flow-from", "flow-into", "font", "font-feature-settings",
"font-family", "font-kerning", "font-language-override", "font-size", "font-size-adjust",
"font-stretch", "font-style", "font-synthesis", "font-variant",
"font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
"font-variant-ligatures", "font-variant-numeric", "font-variant-position",
@@ -391,10 +391,12 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
"page", "page-break-after", "page-break-before", "page-break-inside",
"page-policy", "pause", "pause-after", "pause-before", "perspective",
"perspective-origin", "pitch", "pitch-range", "play-during", "position",
"presentation-level", "punctuation-trim", "quotes", "rendering-intent",
"resize", "rest", "rest-after", "rest-before", "richness", "right",
"rotation", "rotation-point", "ruby-align", "ruby-overhang",
"ruby-position", "ruby-span", "size", "speak", "speak-as", "speak-header",
"presentation-level", "punctuation-trim", "quotes", "region-break-after",
"region-break-before", "region-break-inside", "region-fragment",
"rendering-intent", "resize", "rest", "rest-after", "rest-before", "richness",
"right", "rotation", "rotation-point", "ruby-align", "ruby-overhang",
"ruby-position", "ruby-span", "shape-inside", "shape-outside", "size",
"speak", "speak-as", "speak-header",
"speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
"tab-size", "table-layout", "target", "target-name", "target-new",
"target-position", "text-align", "text-align-last", "text-decoration",
@@ -432,7 +434,7 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
"darkslateblue", "darkslategray", "darkturquoise", "darkviolet",
"deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick",
"floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
"gold", "goldenrod", "gray", "green", "greenyellow", "honeydew",
"gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew",
"hotpink", "indianred", "indigo", "ivory", "khaki", "lavender",
"lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
"lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink",
@@ -455,22 +457,22 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
"above", "absolute", "activeborder", "activecaption", "afar",
"after-white-space", "ahead", "alias", "all", "all-scroll", "alternate",
"always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
"arabic-indic", "armenian", "asterisks", "auto", "avoid", "background",
"backwards", "baseline", "below", "bidi-override", "binary", "bengali",
"blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
"both", "bottom", "break-all", "break-word", "button", "button-bevel",
"arabic-indic", "armenian", "asterisks", "auto", "avoid", "avoid-column", "avoid-page",
"avoid-region", "background", "backwards", "baseline", "below", "bidi-override", "binary",
"bengali", "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
"both", "bottom", "break", "break-all", "break-word", "button", "button-bevel",
"buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian",
"capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
"cell", "center", "checkbox", "circle", "cjk-earthly-branch",
"cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
"col-resize", "collapse", "compact", "condensed", "contain", "content",
"col-resize", "collapse", "column", "compact", "condensed", "contain", "content",
"content-box", "context-menu", "continuous", "copy", "cover", "crop",
"cross", "crosshair", "currentcolor", "cursive", "dashed", "decimal",
"decimal-leading-zero", "default", "default-button", "destination-atop",
"destination-in", "destination-out", "destination-over", "devanagari",
"disc", "discard", "document", "dot-dash", "dot-dot-dash", "dotted",
"double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
"element", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
"element", "ellipse", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
"ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
"ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
"ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
@@ -486,7 +488,7 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
"inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
"infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
"inline-block", "inline-table", "inset", "inside", "intrinsic", "invert",
"italic", "justify", "kannada", "katakana", "katakana-iroha", "khmer",
"italic", "justify", "kannada", "katakana", "katakana-iroha", "keep-all", "khmer",
"landscape", "lao", "large", "larger", "left", "level", "lighter",
"line-through", "linear", "lines", "list-item", "listbox", "listitem",
"local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
@@ -505,11 +507,11 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
"no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
"ns-resize", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote",
"optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
"outside", "overlay", "overline", "padding", "padding-box", "painted",
"paused", "persian", "plus-darker", "plus-lighter", "pointer", "portrait",
"pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
"radio", "read-only", "read-write", "read-write-plaintext-only", "relative",
"repeat", "repeat-x", "repeat-y", "reset", "reverse", "rgb", "rgba",
"outside", "outside-shape", "overlay", "overline", "padding", "padding-box",
"painted", "page", "paused", "persian", "plus-darker", "plus-lighter", "pointer",
"polygon", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
"radio", "read-only", "read-write", "read-write-plaintext-only", "rectangle", "region",
"relative", "repeat", "repeat-x", "repeat-y", "reset", "reverse", "rgb", "rgba",
"ridge", "right", "round", "row-resize", "rtl", "run-in", "running",
"s-resize", "sans-serif", "scroll", "scrollbar", "se-resize", "searchfield",
"searchfield-cancel-button", "searchfield-decoration",
42 mode/css/index.html
View file
@@ -1,17 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: CSS mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="css.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: CSS mode</h1>
<form><textarea id="code" name="code">

<title>CodeMirror: CSS mode</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="css.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">CSS</a>
</ul>
</div>

<article>
<h2>CSS mode</h2>
<form><textarea id="code" name="code">
/* Some example CSS */

@import url("something.css");
@@ -54,5 +67,4 @@ <h1>CodeMirror: CSS mode</h1>

<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#css_*">normal</a>, <a href="../../test/index.html#verbose,css_*">verbose</a>.</p>

</body>
</html>
</article>
42 mode/css/scss.html
View file
@@ -1,17 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: SCSS mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="css.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: SCSS mode</h1>
<form><textarea id="code" name="code">

<title>CodeMirror: SCSS mode</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="css.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">SCSS</a>
</ul>
</div>

<article>
<h2>SCSS mode</h2>
<form><textarea id="code" name="code">
/* Some example SCSS */

@import "compass/css3";
@@ -141,5 +154,4 @@ <h1>CodeMirror: SCSS mode</h1>

<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>, <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>

</body>
</html>
</article>
41 mode/d/index.html
View file
@@ -1,18 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: D mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/edit/matchbrackets.js"></script>
<script src="d.js"></script>
<link rel="stylesheet" href="../../doc/docs.css">
<style>.CodeMirror {border: 2px inset #dee;}</style>
</head>
<body>
<h1>CodeMirror: D mode</h1>

<title>CodeMirror: D mode</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="../../addon/edit/matchbrackets.js"></script>
<script src="d.js"></script>
<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">D</a>
</ul>
</div>

<article>
<h2>D mode</h2>
<form><textarea id="code" name="code">
/* D demo code // copied from phobos/sd/metastrings.d */
// Written in the D programming language.
@@ -258,5 +270,4 @@ <h1>CodeMirror: D mode</h1>

<p><strong>MIME types defined:</strong> <code>text/x-d</code>
.</p>
</body>
</html>
</article>
42 mode/diff/index.html
View file
@@ -1,23 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Diff mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="diff.js"></script>
<style>

<title>CodeMirror: Diff mode</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="diff.js"></script>
<style>
.CodeMirror {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
span.cm-meta {color: #a0b !important;}
span.cm-error { background-color: black; opacity: 0.4;}
span.cm-error.cm-string { background-color: red; }
span.cm-error.cm-tag { background-color: #2b2; }
</style>
<link rel="stylesheet" href="../../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Diff mode</h1>
<form><textarea id="code" name="code">
<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 href="../index.html">Language modes</a>
<li><a class=active href="#">Diff</a>
</ul>
</div>

<article>
<h2>Diff mode</h2>
<form><textarea id="code" name="code">
diff --git a/index.html b/index.html
index c1d9156..7764744 100644
--- a/index.html
@@ -101,5 +114,4 @@ <h1>CodeMirror: Diff mode</h1>

<p><strong>MIME types defined:</strong> <code>text/x-diff</code>.</p>

</body>
</html>
</article>
43 mode/ecl/index.html
View file
@@ -1,16 +1,30 @@
<!doctype html>
<html>
<head>
<title>CodeMirror: ECL mode</title>
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="ecl.js"></script>
<link rel="stylesheet" href="../../doc/docs.css">
<style>.CodeMirror {border: 1px solid black;}</style>
</head>
<body>
<h1>CodeMirror: ECL mode</h1>
<form><textarea id="code" name="code">
<!doctype html>

<title>CodeMirror: ECL mode</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="ecl.js"></script>
<style>.CodeMirror {border: 1px solid black;}</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 href="../index.html">Language modes</a>
<li><a class=active href="#">ECL</a>
</ul>
</div>

<article>
<h2>ECL mode</h2>
<form><textarea id="code" name="code">
/*
sample useless code to demonstrate ecl syntax highlighting
this is a multiline comment!
@@ -35,5 +49,4 @@ <h1>CodeMirror: ECL mode</h1>
<p>Based on CodeMirror's clike mode. For more information see <a href="http://hpccsystems.com">HPCC Systems</a> web site.</p>
<p><strong>MIME types defined:</strong> <code>text/x-ecl</code>.</p>

</body>
</html>
</article>