Skip to content

Commit c87acbf

Browse files
marijnhmarijnh
committed
Support editor themes
This normalizes the classes used by most of the modes (reStructuredText and diff didn't fit in), and makes them all reference a central style sheet (under theme/). It also adds a theme option that can be set to change the theme, and defines a few different themes (some based on old mode colors).
1 parent dd6fae4 commit c87acbf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+350
-362
lines changed

‎demo/activeline.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>CodeMirror 2: Active Line Demo</title>
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
7-
<link rel="stylesheet" href="../mode/xml/xml.css">
7+
<link rel="stylesheet" href="../theme/default.css">
88
<script src="../mode/xml/xml.js"></script>
99
<link rel="stylesheet" href="../css/docs.css">
1010

‎demo/complete.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>CodeMirror 2: Autocomplete Demo</title>
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
7-
<link rel="stylesheet" href="../mode/javascript/javascript.css">
7+
<link rel="stylesheet" href="../theme/night.css">
88
<script src="../mode/javascript/javascript.js"></script>
99
<link rel="stylesheet" href="../css/docs.css">
1010

‎demo/complete.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222

2323
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
2424
lineNumbers: true,
25+
theme: "night",
2526
onKeyEvent: function(i, e) {
2627
// Hook into ctrl-space
2728
if (e.keyCode == 32 && (e.ctrlKey || e.metaKey) && !e.altKey) {

‎demo/marker.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>CodeMirror 2: Breakpoint Demo</title>
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
7-
<link rel="stylesheet" href="../mode/javascript/javascript.css">
7+
<link rel="stylesheet" href="../theme/default.css">
88
<script src="../mode/javascript/javascript.js"></script>
99
<link rel="stylesheet" href="../css/docs.css">
1010

‎demo/mustache.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
77
<script src="../lib/overlay.js"></script>
8-
<link rel="stylesheet" href="../mode/xml/xml.css">
8+
<link rel="stylesheet" href="../theme/default.css">
99
<script src="../mode/xml/xml.js"></script>
1010
<link rel="stylesheet" href="../css/docs.css">
1111

‎demo/resize.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>CodeMirror 2: Autoresize Demo</title>
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
7-
<link rel="stylesheet" href="../mode/css/css.css">
7+
<link rel="stylesheet" href="../theme/default.css">
88
<script src="../mode/css/css.js"></script>
99
<link rel="stylesheet" href="../css/docs.css">
1010

‎demo/runmode.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
77
<script src="../lib/runmode.js"></script>
8-
<link rel="stylesheet" href="../mode/xml/xml.css">
8+
<link rel="stylesheet" href="../theme/default.css">
99
<script src="../mode/xml/xml.js"></script>
1010
<link rel="stylesheet" href="../css/docs.css">
1111
</head>
@@ -19,7 +19,7 @@ <h1>CodeMirror 2: Mode Runner Demo</h1>
1919
<tag2 foo="2" bar="&amp;quot;bar&amp;quot;"/>
2020
</foobar></textarea><br>
2121
<button onclick="doHighlight();">Highlight!</button>
22-
<pre id="output"></pre>
22+
<pre id="output" class="cm-s-default"></pre>
2323

2424
<script>
2525
function doHighlight() {

‎demo/search.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>CodeMirror 2: Search/Replace Demo</title>
55
<link rel="stylesheet" href="../lib/codemirror.css">
66
<script src="../lib/codemirror.js"></script>
7-
<link rel="stylesheet" href="../mode/xml/xml.css">
7+
<link rel="stylesheet" href="../theme/default.css">
88
<script src="../mode/xml/xml.js"></script>
99
<link rel="stylesheet" href="../css/docs.css">
1010

‎demo/theme.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>CodeMirror 2: Theme Demo</title>
5+
<link rel="stylesheet" href="../lib/codemirror.css">
6+
<script src="../lib/codemirror.js"></script>
7+
<link rel="stylesheet" href="../theme/default.css">
8+
<link rel="stylesheet" href="../theme/neat.css">
9+
<link rel="stylesheet" href="../theme/elegant.css">
10+
<link rel="stylesheet" href="../theme/night.css">
11+
<script src="../mode/javascript/javascript.js"></script>
12+
<link rel="stylesheet" href="../css/docs.css">
13+
14+
<style type="text/css">
15+
.CodeMirror {border: 1px solid black;}
16+
</style>
17+
</head>
18+
<body>
19+
<h1>CodeMirror 2: Theme demo</h1>
20+
21+
<form><textarea id="code" name="code">
22+
function findSequence(goal) {
23+
function find(start, history) {
24+
if (start == goal)
25+
return history;
26+
else if (start > goal)
27+
return null;
28+
else
29+
return find(start + 5, "(" + history + " + 5)") ||
30+
find(start * 3, "(" + history + " * 3)");
31+
}
32+
return find(1, "1");
33+
}</textarea></form>
34+
35+
<p>Select a theme: <select onchange="selectTheme(this.value)">
36+
<option selected>default</option>
37+
<option>night</option>
38+
<option>neat</option>
39+
<option>elegant</option>
40+
</select>
41+
</p>
42+
43+
<script>
44+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
45+
lineNumbers: true
46+
});
47+
function selectTheme(theme) {
48+
editor.setOption("theme", theme);
49+
}
50+
</script>
51+
</body>
52+
</html>

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ <h2 style="margin-top: 0">Usage demos:</h2>
6262
<li><a href="demo/resize.html">Auto-resizing editor</a></li>
6363
<li><a href="demo/marker.html">Setting breakpoints</a></li>
6464
<li><a href="demo/activeline.html">Highlighting the current line</a></li>
65+
<li><a href="demo/theme.html">Theming</a></li>
6566
<li><a href="demo/runmode.html">Stand-alone highlighting</a></li>
6667
</ul>
6768

0 commit comments

Comments
 (0)