Created
July 1, 2013 08:11
-
-
Save kevinuga/5899153 to your computer and use it in GitHub Desktop.
Drupal 7 module for parse some sites to entities
This gist exceeds the recommended number of files (~10).
To access all files, please clone this gist.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Changelog | |
--------- | |
absoluteurl v1.6, March 12, 2010 | |
--------------------------------- | |
- added encode_url function to convert an absolute url to its percentage | |
encoded equivalent, according to RFC 3986 | |
absoluteurl v1.5, March 11, 2010 | |
--------------------------------- | |
- fixed to allow spaces in the path of url | |
absoluteurl v1.4, October 2, 2009 | |
---------------------------------------------- | |
- Percentage encoding of the absolute url disabled. | |
absoluteurl v1.2, 2009-02-27 | |
----------------------------------------------- | |
- Minor bug fix | |
absoluteurl v1.0, 2009-08-28 | |
---------------------------------------- | |
- Initial release |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
absoluteurl | |
--------------------- | |
This script converts the relative url to absolute url, provided a base url. | |
For more, look here: http://publicmind.in/blog/urltoabsolute | |
Usage: | |
---------- | |
Extract the script (url_to_absolute.php) into your web directory, include it into your current php file using: | |
require(path-to-file); | |
then, you can convert the relative url to absolute url by calling: | |
url_to_absolute( $baseUrl, $relativeUrl); | |
It return false on failure, otherwise returns the absolute url. If the $relativeUrl is a valid absolute url, it is returned without any modification. | |
Author/credits | |
----------- | |
1) Original author: David R. Nadeau, NadeauSoftware.com | |
2) Edited and maintained by: Nitin Kr, Gupta, publicmind.in |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Edited by Nitin Kr. Gupta, publicmind.in | |
*/ | |
/** | |
* Copyright (c) 2008, David R. Nadeau, NadeauSoftware.com. | |
* All rights reserved. | |
* | |
* Redistribution and use in source and binary forms, with or without | |
* modification, are permitted provided that the following conditions | |
* are met: | |
* | |
* * Redistributions of source code must retain the above copyright | |
* notice, this list of conditions and the following disclaimer. | |
* | |
* * Redistributions in binary form must reproduce the above | |
* copyright notice, this list of conditions and the following | |
* disclaimer in the documentation and/or other materials provided | |
* with the distribution. | |
* | |
* * Neither the names of David R. Nadeau or NadeauSoftware.com, nor | |
* the names of its contributors may be used to endorse or promote | |
* products derived from this software without specific prior | |
* written permission. | |
* | |
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS | |
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT | |
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS | |
* FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | |
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, | |
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, | |
* BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | |
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER | |
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT | |
* LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY | |
* WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY | |
* OF SUCH DAMAGE. | |
*/ | |
/* | |
* This is a BSD License approved by the Open Source Initiative (OSI). | |
* See: http://www.opensource.org/licenses/bsd-license.php | |
*/ | |
/** | |
* Combine a base URL and a relative URL to produce a new | |
* absolute URL. The base URL is often the URL of a page, | |
* and the relative URL is a URL embedded on that page. | |
* | |
* This function implements the "absolutize" algorithm from | |
* the RFC3986 specification for URLs. | |
* | |
* This function supports multi-byte characters with the UTF-8 encoding, | |
* per the URL specification. | |
* | |
* Parameters: | |
* baseUrl the absolute base URL. | |
* | |
* url the relative URL to convert. | |
* | |
* Return values: | |
* An absolute URL that combines parts of the base and relative | |
* URLs, or FALSE if the base URL is not absolute or if either | |
* URL cannot be parsed. | |
*/ | |
function url_to_absolute( $baseUrl, $relativeUrl ) | |
{ | |
// If relative URL has a scheme, clean path and return. | |
$r = split_url( $relativeUrl ); | |
if ( $r === FALSE ) | |
return FALSE; | |
if ( !empty( $r['scheme'] ) ) | |
{ | |
if ( !empty( $r['path'] ) && $r['path'][0] == '/' ) | |
$r['path'] = url_remove_dot_segments( $r['path'] ); | |
return join_url( $r ); | |
} | |
// Make sure the base URL is absolute. | |
$b = split_url( $baseUrl ); | |
if ( $b === FALSE || empty( $b['scheme'] ) || empty( $b['host'] ) ) | |
return FALSE; | |
$r['scheme'] = $b['scheme']; | |
// If relative URL has an authority, clean path and return. | |
if ( isset( $r['host'] ) ) | |
{ | |
if ( !empty( $r['path'] ) ) | |
$r['path'] = url_remove_dot_segments( $r['path'] ); | |
return join_url( $r ); | |
} | |
unset( $r['port'] ); | |
unset( $r['user'] ); | |
unset( $r['pass'] ); | |
// Copy base authority. | |
$r['host'] = $b['host']; | |
if ( isset( $b['port'] ) ) $r['port'] = $b['port']; | |
if ( isset( $b['user'] ) ) $r['user'] = $b['user']; | |
if ( isset( $b['pass'] ) ) $r['pass'] = $b['pass']; | |
// If relative URL has no path, use base path | |
if ( empty( $r['path'] ) ) | |
{ | |
if ( !empty( $b['path'] ) ) | |
$r['path'] = $b['path']; | |
if ( !isset( $r['query'] ) && isset( $b['query'] ) ) | |
$r['query'] = $b['query']; | |
return join_url( $r ); | |
} | |
// If relative URL path doesn't start with /, merge with base path | |
if ( $r['path'][0] != '/' ) | |
{ | |
$base = mb_strrchr( @$b['path'], '/', TRUE, 'UTF-8' ); | |
if ( $base === FALSE ) $base = ''; | |
$r['path'] = $base . '/' . $r['path']; | |
} | |
$r['path'] = url_remove_dot_segments( $r['path'] ); | |
return join_url( $r ); | |
} | |
/** | |
* Filter out "." and ".." segments from a URL's path and return | |
* the result. | |
* | |
* This function implements the "remove_dot_segments" algorithm from | |
* the RFC3986 specification for URLs. | |
* | |
* This function supports multi-byte characters with the UTF-8 encoding, | |
* per the URL specification. | |
* | |
* Parameters: | |
* path the path to filter | |
* | |
* Return values: | |
* The filtered path with "." and ".." removed. | |
*/ | |
function url_remove_dot_segments( $path ) | |
{ | |
// multi-byte character explode | |
$inSegs = preg_split( '!/!u', $path ); | |
$outSegs = array( ); | |
foreach ( $inSegs as $seg ) | |
{ | |
if ( $seg == '' || $seg == '.') | |
continue; | |
if ( $seg == '..' ) | |
array_pop( $outSegs ); | |
else | |
array_push( $outSegs, $seg ); | |
} | |
$outPath = implode( '/', $outSegs ); | |
if ( $path[0] == '/' ) | |
$outPath = '/' . $outPath; | |
// compare last multi-byte character against '/' | |
if ( $outPath != '/' && | |
(mb_strlen($path)-1) == mb_strrpos( $path, '/', 'UTF-8' ) ) | |
$outPath .= '/'; | |
return $outPath; | |
} | |
/** | |
* This function parses an absolute or relative URL and splits it | |
* into individual components. | |
* | |
* RFC3986 specifies the components of a Uniform Resource Identifier (URI). | |
* A portion of the ABNFs are repeated here: | |
* | |
* URI-reference = URI | |
* / relative-ref | |
* | |
* URI = scheme ":" hier-part [ "?" query ] [ "#" fragment ] | |
* | |
* relative-ref = relative-part [ "?" query ] [ "#" fragment ] | |
* | |
* hier-part = "//" authority path-abempty | |
* / path-absolute | |
* / path-rootless | |
* / path-empty | |
* | |
* relative-part = "//" authority path-abempty | |
* / path-absolute | |
* / path-noscheme | |
* / path-empty | |
* | |
* authority = [ userinfo "@" ] host [ ":" port ] | |
* | |
* So, a URL has the following major components: | |
* | |
* scheme | |
* The name of a method used to interpret the rest of | |
* the URL. Examples: "http", "https", "mailto", "file'. | |
* | |
* authority | |
* The name of the authority governing the URL's name | |
* space. Examples: "example.com", "user@example.com", | |
* "example.com:80", "user:password@example.com:80". | |
* | |
* The authority may include a host name, port number, | |
* user name, and password. | |
* | |
* The host may be a name, an IPv4 numeric address, or | |
* an IPv6 numeric address. | |
* | |
* path | |
* The hierarchical path to the URL's resource. | |
* Examples: "/index.htm", "/scripts/page.php". | |
* | |
* query | |
* The data for a query. Examples: "?search=google.com". | |
* | |
* fragment | |
* The name of a secondary resource relative to that named | |
* by the path. Examples: "#section1", "#header". | |
* | |
* An "absolute" URL must include a scheme and path. The authority, query, | |
* and fragment components are optional. | |
* | |
* A "relative" URL does not include a scheme and must include a path. The | |
* authority, query, and fragment components are optional. | |
* | |
* This function splits the $url argument into the following components | |
* and returns them in an associative array. Keys to that array include: | |
* | |
* "scheme" The scheme, such as "http". | |
* "host" The host name, IPv4, or IPv6 address. | |
* "port" The port number. | |
* "user" The user name. | |
* "pass" The user password. | |
* "path" The path, such as a file path for "http". | |
* "query" The query. | |
* "fragment" The fragment. | |
* | |
* One or more of these may not be present, depending upon the URL. | |
* | |
* Optionally, the "user", "pass", "host" (if a name, not an IP address), | |
* "path", "query", and "fragment" may have percent-encoded characters | |
* decoded. The "scheme" and "port" cannot include percent-encoded | |
* characters and are never decoded. Decoding occurs after the URL has | |
* been parsed. | |
* | |
* Parameters: | |
* url the URL to parse. | |
* | |
* decode an optional boolean flag selecting whether | |
* to decode percent encoding or not. Default = TRUE. | |
* | |
* Return values: | |
* the associative array of URL parts, or FALSE if the URL is | |
* too malformed to recognize any parts. | |
*/ | |
function split_url( $url, $decode=FALSE) | |
{ | |
// Character sets from RFC3986. | |
$xunressub = 'a-zA-Z\d\-._~\!$&\'()*+,;='; | |
$xpchar = $xunressub . ':@% '; | |
// Scheme from RFC3986. | |
$xscheme = '([a-zA-Z][a-zA-Z\d+-.]*)'; | |
// User info (user + password) from RFC3986. | |
$xuserinfo = '(([' . $xunressub . '%]*)' . | |
'(:([' . $xunressub . ':%]*))?)'; | |
// IPv4 from RFC3986 (without digit constraints). | |
$xipv4 = '(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})'; | |
// IPv6 from RFC2732 (without digit and grouping constraints). | |
$xipv6 = '(\[([a-fA-F\d.:]+)\])'; | |
// Host name from RFC1035. Technically, must start with a letter. | |
// Relax that restriction to better parse URL structure, then | |
// leave host name validation to application. | |
$xhost_name = '([a-zA-Z\d-.%]+)'; | |
// Authority from RFC3986. Skip IP future. | |
$xhost = '(' . $xhost_name . '|' . $xipv4 . '|' . $xipv6 . ')'; | |
$xport = '(\d*)'; | |
$xauthority = '((' . $xuserinfo . '@)?' . $xhost . | |
'?(:' . $xport . ')?)'; | |
// Path from RFC3986. Blend absolute & relative for efficiency. | |
$xslash_seg = '(/[' . $xpchar . ']*)'; | |
$xpath_authabs = '((//' . $xauthority . ')((/[' . $xpchar . ']*)*))'; | |
$xpath_rel = '([' . $xpchar . ']+' . $xslash_seg . '*)'; | |
$xpath_abs = '(/(' . $xpath_rel . ')?)'; | |
$xapath = '(' . $xpath_authabs . '|' . $xpath_abs . | |
'|' . $xpath_rel . ')'; | |
// Query and fragment from RFC3986. | |
$xqueryfrag = '([' . $xpchar . '/?' . ']*)'; | |
// URL. | |
$xurl = '^(' . $xscheme . ':)?' . $xapath . '?' . | |
'(\?' . $xqueryfrag . ')?(#' . $xqueryfrag . ')?$'; | |
// Split the URL into components. | |
if ( !preg_match( '!' . $xurl . '!', $url, $m ) ) | |
return FALSE; | |
if ( !empty($m[2]) ) $parts['scheme'] = strtolower($m[2]); | |
if ( !empty($m[7]) ) { | |
if ( isset( $m[9] ) ) $parts['user'] = $m[9]; | |
else $parts['user'] = ''; | |
} | |
if ( !empty($m[10]) ) $parts['pass'] = $m[11]; | |
if ( !empty($m[13]) ) $h=$parts['host'] = $m[13]; | |
else if ( !empty($m[14]) ) $parts['host'] = $m[14]; | |
else if ( !empty($m[16]) ) $parts['host'] = $m[16]; | |
else if ( !empty( $m[5] ) ) $parts['host'] = ''; | |
if ( !empty($m[17]) ) $parts['port'] = $m[18]; | |
if ( !empty($m[19]) ) $parts['path'] = $m[19]; | |
else if ( !empty($m[21]) ) $parts['path'] = $m[21]; | |
else if ( !empty($m[25]) ) $parts['path'] = $m[25]; | |
if ( !empty($m[27]) ) $parts['query'] = $m[28]; | |
if ( !empty($m[29]) ) $parts['fragment']= $m[30]; | |
if ( !$decode ) | |
return $parts; | |
if ( !empty($parts['user']) ) | |
$parts['user'] = rawurldecode( $parts['user'] ); | |
if ( !empty($parts['pass']) ) | |
$parts['pass'] = rawurldecode( $parts['pass'] ); | |
if ( !empty($parts['path']) ) | |
$parts['path'] = rawurldecode( $parts['path'] ); | |
if ( isset($h) ) | |
$parts['host'] = rawurldecode( $parts['host'] ); | |
if ( !empty($parts['query']) ) | |
$parts['query'] = rawurldecode( $parts['query'] ); | |
if ( !empty($parts['fragment']) ) | |
$parts['fragment'] = rawurldecode( $parts['fragment'] ); | |
return $parts; | |
} | |
/** | |
* This function joins together URL components to form a complete URL. | |
* | |
* RFC3986 specifies the components of a Uniform Resource Identifier (URI). | |
* This function implements the specification's "component recomposition" | |
* algorithm for combining URI components into a full URI string. | |
* | |
* The $parts argument is an associative array containing zero or | |
* more of the following: | |
* | |
* "scheme" The scheme, such as "http". | |
* "host" The host name, IPv4, or IPv6 address. | |
* "port" The port number. | |
* "user" The user name. | |
* "pass" The user password. | |
* "path" The path, such as a file path for "http". | |
* "query" The query. | |
* "fragment" The fragment. | |
* | |
* The "port", "user", and "pass" values are only used when a "host" | |
* is present. | |
* | |
* The optional $encode argument indicates if appropriate URL components | |
* should be percent-encoded as they are assembled into the URL. Encoding | |
* is only applied to the "user", "pass", "host" (if a host name, not an | |
* IP address), "path", "query", and "fragment" components. The "scheme" | |
* and "port" are never encoded. When a "scheme" and "host" are both | |
* present, the "path" is presumed to be hierarchical and encoding | |
* processes each segment of the hierarchy separately (i.e., the slashes | |
* are left alone). | |
* | |
* The assembled URL string is returned. | |
* | |
* Parameters: | |
* parts an associative array of strings containing the | |
* individual parts of a URL. | |
* | |
* encode an optional boolean flag selecting whether | |
* to do percent encoding or not. Default = true. | |
* | |
* Return values: | |
* Returns the assembled URL string. The string is an absolute | |
* URL if a scheme is supplied, and a relative URL if not. An | |
* empty string is returned if the $parts array does not contain | |
* any of the needed values. | |
*/ | |
function join_url( $parts, $encode=FALSE) | |
{ | |
if ( $encode ) | |
{ | |
if ( isset( $parts['user'] ) ) | |
$parts['user'] = rawurlencode( $parts['user'] ); | |
if ( isset( $parts['pass'] ) ) | |
$parts['pass'] = rawurlencode( $parts['pass'] ); | |
if ( isset( $parts['host'] ) && | |
!preg_match( '!^(\[[\da-f.:]+\]])|([\da-f.:]+)$!ui', $parts['host'] ) ) | |
$parts['host'] = rawurlencode( $parts['host'] ); | |
if ( !empty( $parts['path'] ) ) | |
$parts['path'] = preg_replace( '!%2F!ui', '/', | |
rawurlencode( $parts['path'] ) ); | |
if ( isset( $parts['query'] ) ) | |
$parts['query'] = rawurlencode( $parts['query'] ); | |
if ( isset( $parts['fragment'] ) ) | |
$parts['fragment'] = rawurlencode( $parts['fragment'] ); | |
} | |
$url = ''; | |
if ( !empty( $parts['scheme'] ) ) | |
$url .= $parts['scheme'] . ':'; | |
if ( isset( $parts['host'] ) ) | |
{ | |
$url .= '//'; | |
if ( isset( $parts['user'] ) ) | |
{ | |
$url .= $parts['user']; | |
if ( isset( $parts['pass'] ) ) | |
$url .= ':' . $parts['pass']; | |
$url .= '@'; | |
} | |
if ( preg_match( '!^[\da-f]*:[\da-f.:]+$!ui', $parts['host'] ) ) | |
$url .= '[' . $parts['host'] . ']'; // IPv6 | |
else | |
$url .= $parts['host']; // IPv4 or name | |
if ( isset( $parts['port'] ) ) | |
$url .= ':' . $parts['port']; | |
if ( !empty( $parts['path'] ) && $parts['path'][0] != '/' ) | |
$url .= '/'; | |
} | |
if ( !empty( $parts['path'] ) ) | |
$url .= $parts['path']; | |
if ( isset( $parts['query'] ) ) | |
$url .= '?' . $parts['query']; | |
if ( isset( $parts['fragment'] ) ) | |
$url .= '#' . $parts['fragment']; | |
return $url; | |
} | |
/** | |
* This function encodes URL to form a URL which is properly | |
* percent encoded to replace disallowed characters. | |
* | |
* RFC3986 specifies the allowed characters in the URL as well as | |
* reserved characters in the URL. This function replaces all the | |
* disallowed characters in the URL with their repective percent | |
* encodings. Already encoded characters are not encoded again, | |
* such as '%20' is not encoded to '%2520'. | |
* | |
* Parameters: | |
* url the url to encode. | |
* | |
* Return values: | |
* Returns the encoded URL string. | |
*/ | |
function encode_url($url) { | |
$reserved = array( | |
":" => '!%3A!ui', | |
"/" => '!%2F!ui', | |
"?" => '!%3F!ui', | |
"#" => '!%23!ui', | |
"[" => '!%5B!ui', | |
"]" => '!%5D!ui', | |
"@" => '!%40!ui', | |
"!" => '!%21!ui', | |
"$" => '!%24!ui', | |
"&" => '!%26!ui', | |
"'" => '!%27!ui', | |
"(" => '!%28!ui', | |
")" => '!%29!ui', | |
"*" => '!%2A!ui', | |
"+" => '!%2B!ui', | |
"," => '!%2C!ui', | |
";" => '!%3B!ui', | |
"=" => '!%3D!ui', | |
"%" => '!%25!ui', | |
); | |
$url = rawurlencode($url); | |
$url = preg_replace(array_values($reserved), array_keys($reserved), $url); | |
return $url; | |
} | |
?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/node_modules | |
/npm-debug.log |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
language: node_js | |
node_js: | |
- 0.8 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Active Line Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
.activeline {background: #e8f2ff !important;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Active Line Demo</h1> | |
<form><textarea id="code" name="code"> | |
<?xml version="1.0" encoding="UTF-8"?> | |
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" | |
xmlns:georss="http://www.georss.org/georss" | |
xmlns:twitter="http://api.twitter.com"> | |
<channel> | |
<title>Twitter / codemirror</title> | |
<link>http://twitter.com/codemirror</link> | |
<atom:link type="application/rss+xml" | |
href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/> | |
<description>Twitter updates from CodeMirror / codemirror.</description> | |
<language>en-us</language> | |
<ttl>40</ttl> | |
<item> | |
<title>codemirror: http://cloud-ide.com — they're springing up like mushrooms. This one | |
uses CodeMirror as its editor.</title> | |
<description>codemirror: http://cloud-ide.com — they're springing up like mushrooms. This | |
one uses CodeMirror as its editor.</description> | |
<pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate> | |
<guid>http://twitter.com/codemirror/statuses/48527733722058752</guid> | |
<link>http://twitter.com/codemirror/statuses/48527733722058752</link> | |
<twitter:source>web</twitter:source> | |
<twitter:place/> | |
</item> | |
<item> | |
<title>codemirror: Posted a description of the CodeMirror 2 internals at | |
http://codemirror.net/2/internals.html</title> | |
<description>codemirror: Posted a description of the CodeMirror 2 internals at | |
http://codemirror.net/2/internals.html</description> | |
<pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate> | |
<guid>http://twitter.com/codemirror/statuses/42920879788789760</guid> | |
<link>http://twitter.com/codemirror/statuses/42920879788789760</link> | |
<twitter:source>web</twitter:source> | |
<twitter:place/> | |
</item> | |
</channel> | |
</rss></textarea></form> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
mode: "application/xml", | |
lineNumbers: true, | |
lineWrapping: true, | |
onCursorActivity: function() { | |
editor.setLineClass(hlLine, null, null); | |
hlLine = editor.setLineClass(editor.getCursor().line, null, "activeline"); | |
} | |
}); | |
var hlLine = editor.setLineClass(0, "activeline"); | |
</script> | |
<p>Styling the current cursor line.</p> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Mode-Changing Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/javascript/javascript.js"></script> | |
<script src="../mode/scheme/scheme.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border: 1px solid black;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Mode-Changing demo</h1> | |
<form><textarea id="code" name="code"> | |
;; If there is Scheme code in here, the editor will be in Scheme mode. | |
;; If you put in JS instead, it'll switch to JS mode. | |
(define (double x) | |
(* x x)) | |
</textarea></form> | |
<p>On changes to the content of the above editor, a (crude) script | |
tries to auto-detect the language used, and switches the editor to | |
either JavaScript or Scheme mode based on that.</p> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
mode: "scheme", | |
lineNumbers: true, | |
matchBrackets: true, | |
tabMode: "indent", | |
onChange: function() { | |
clearTimeout(pending); | |
setTimeout(update, 400); | |
} | |
}); | |
var pending; | |
function looksLikeScheme(code) { | |
return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code); | |
} | |
function update() { | |
editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript"); | |
} | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Close-Tag Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/closetag.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<script src="../mode/javascript/javascript.js"></script> | |
<script src="../mode/css/css.js"></script> | |
<script src="../mode/htmlmixed/htmlmixed.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} | |
</style> | |
</head> | |
<body> | |
<h1>Close-Tag Demo</h1> | |
<ul> | |
<li>Type an html tag. When you type '>' or '/', the tag will auto-close/complete. Block-level tags will indent.</li> | |
<li>There are options for disabling tag closing or customizing the list of tags to indent.</li> | |
<li>Works with "text/html" (based on htmlmixed.js or xml.js) mode.</li> | |
<li>View source for key binding details.</li> | |
</p> | |
<form><textarea id="code" name="code"></textarea></form> | |
<script type="text/javascript"> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
mode: 'text/html', | |
//closeTagEnabled: false, // Set this option to disable tag closing behavior without having to remove the key bindings. | |
//closeTagIndent: false, // Pass false or an array of tag names to override the default indentation behavior. | |
extraKeys: { | |
"'>'": function(cm) { cm.closeTag(cm, '>'); }, | |
"'/'": function(cm) { cm.closeTag(cm, '/'); } | |
}, | |
/* | |
// extraKeys is the easier way to go, but if you need native key event processing, this should work too. | |
onKeyEvent: function(cm, e) { | |
if (e.type == 'keydown') { | |
var c = e.keyCode || e.which; | |
if (c == 190 || c == 191) { | |
try { | |
cm.closeTag(cm, c == 190 ? '>' : '/'); | |
e.stop(); | |
return true; | |
} catch (e) { | |
if (e != CodeMirror.Pass) throw e; | |
} | |
} | |
} | |
return false; | |
}, | |
*/ | |
wordWrap: true | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Autocomplete Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/simple-hint.js"></script> | |
<link rel="stylesheet" href="../lib/util/simple-hint.css"> | |
<script src="../lib/util/javascript-hint.js"></script> | |
<script src="../mode/javascript/javascript.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css">.CodeMirror {border: 1px solid #eee;} .CodeMirror-scroll { height: 100% }</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Autocomplete demo</h1> | |
<form><textarea id="code" name="code"> | |
function getCompletions(token, context) { | |
var found = [], start = token.string; | |
function maybeAdd(str) { | |
if (str.indexOf(start) == 0) found.push(str); | |
} | |
function gatherCompletions(obj) { | |
if (typeof obj == "string") forEach(stringProps, maybeAdd); | |
else if (obj instanceof Array) forEach(arrayProps, maybeAdd); | |
else if (obj instanceof Function) forEach(funcProps, maybeAdd); | |
for (var name in obj) maybeAdd(name); | |
} | |
if (context) { | |
// If this is a property, see if it belongs to some object we can | |
// find in the current environment. | |
var obj = context.pop(), base; | |
if (obj.className == "js-variable") | |
base = window[obj.string]; | |
else if (obj.className == "js-string") | |
base = ""; | |
else if (obj.className == "js-atom") | |
base = 1; | |
while (base != null && context.length) | |
base = base[context.pop().string]; | |
if (base != null) gatherCompletions(base); | |
} | |
else { | |
// If not, just look in the window object and any local scope | |
// (reading into JS mode internals to get at the local variables) | |
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name); | |
gatherCompletions(window); | |
forEach(keywords, maybeAdd); | |
} | |
return found; | |
} | |
</textarea></form> | |
<p>Press <strong>ctrl-space</strong> to activate autocompletion. See | |
the code (<a href="../lib/util/simple-hint.js">here</a> | |
and <a href="../lib/util/javascript-hint.js">here</a>) to figure out | |
how it works.</p> | |
<script> | |
CodeMirror.commands.autocomplete = function(cm) { | |
CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); | |
} | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
extraKeys: {"Ctrl-Space": "autocomplete"} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Emacs bindings demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/clike/clike.js"></script> | |
<script src="../keymap/emacs.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Emacs bindings demo</h1> | |
<form><textarea id="code" name="code"> | |
#include "syscalls.h" | |
/* getchar: simple buffered version */ | |
int getchar(void) | |
{ | |
static char buf[BUFSIZ]; | |
static char *bufp = buf; | |
static int n = 0; | |
if (n == 0) { /* buffer is empty */ | |
n = read(0, buf, sizeof buf); | |
bufp = buf; | |
} | |
return (--n >= 0) ? (unsigned char) *bufp++ : EOF; | |
} | |
</textarea></form> | |
<p>The emacs keybindings are enabled by | |
including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting | |
the <code>keyMap</code> option to <code>"emacs"</code>. Because | |
CodeMirror's internal API is quite different from Emacs, they are only | |
a loose approximation of actual emacs bindings, though.</p> | |
<p>Also note that a lot of browsers disallow certain keys from being | |
captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the | |
result that idiomatic use of Emacs keys will constantly close your tab | |
or open a new window.</p> | |
<script> | |
CodeMirror.commands.save = function() { | |
var elt = editor.getWrapperElement(); | |
elt.style.background = "#def"; | |
setTimeout(function() { elt.style.background = ""; }, 300); | |
}; | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
mode: "text/x-csrc", | |
keyMap: "emacs" | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Code Folding Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/foldcode.js"></script> | |
<script src="../mode/javascript/javascript.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
.CodeMirror-gutter {min-width: 2.6em; cursor: pointer;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Code Folding Demo</h1> | |
<p>Demonstration of code folding using the code | |
in <a href="../lib/util/foldcode.js"><code>foldcode.js</code></a>. | |
Press ctrl-q or click on the gutter to fold a block, again | |
to unfold.</p> | |
<form> | |
<div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div> | |
<div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div> | |
</form> | |
<script id="script"> | |
window.onload = function() { | |
var te = document.getElementById("code"); | |
var sc = document.getElementById("script"); | |
te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); | |
sc.innerHTML = ""; | |
var te_html = document.getElementById("code-html"); | |
te_html.value = "<html>\n " + document.documentElement.innerHTML + "\n</html>"; | |
var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder); | |
window.editor = CodeMirror.fromTextArea(te, { | |
mode: "javascript", | |
lineNumbers: true, | |
lineWrapping: true, | |
onGutterClick: foldFunc, | |
extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}} | |
}); | |
foldFunc(editor, 9); | |
foldFunc(editor, 20); | |
var foldFunc_html = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder); | |
window.editor_html = CodeMirror.fromTextArea(te_html, { | |
mode: "text/html", | |
lineNumbers: true, | |
lineWrapping: true, | |
onGutterClick: foldFunc_html, | |
extraKeys: {"Ctrl-Q": function(cm){foldFunc_html(cm, cm.getCursor().line);}} | |
}) | |
foldFunc_html(editor_html, 1); | |
foldFunc_html(editor_html, 15); | |
}; | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Formatting Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/formatting.js"></script> | |
<script src="../mode/css/css.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<script src="../mode/javascript/javascript.js"></script> | |
<script src="../mode/htmlmixed/htmlmixed.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror { | |
border: 1px solid #eee; | |
} | |
td { | |
padding-right: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Formatting demo</h1> | |
<form><textarea id="code" name="code"><script> function (s,e){ for(var i=0; i < 1; i++) test("test();a=1");} </script> | |
<script> | |
function test(c){ for (var i = 0; i < 10; i++){ process("a.b();c = null;", 300);} | |
} | |
</script> | |
<table><tr><td>test 1</td></tr><tr><td>test 2</td></tr></table> | |
<script> function test() { return 1;} </script> | |
<style> .test { font-size: medium; font-family: monospace; } | |
</style></textarea></form> | |
<p>Select a piece of code and click one of the links below to apply automatic formatting to the selected text or comment/uncomment the selected text. Note that the formatting behavior depends on the current block's mode. | |
<table> | |
<tr> | |
<td> | |
<a href="javascript:autoFormatSelection()"> | |
Autoformat Selected | |
</a> | |
</td> | |
<td> | |
<a href="javascript:commentSelection(true)"> | |
Comment Selected | |
</a> | |
</td> | |
<td> | |
<a href="javascript:commentSelection(false)"> | |
Uncomment Selected | |
</a> | |
</td> | |
</tr> | |
</table> | |
</p> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
mode: "htmlmixed" | |
}); | |
CodeMirror.commands["selectAll"](editor); | |
function getSelectedRange() { | |
return { from: editor.getCursor(true), to: editor.getCursor(false) }; | |
} | |
function autoFormatSelection() { | |
var range = getSelectedRange(); | |
editor.autoFormatRange(range.from, range.to); | |
} | |
function commentSelection(isComment) { | |
var range = getSelectedRange(); | |
editor.commentRange(isComment, range.from, range.to); | |
} | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Full Screen Editing</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<link rel="stylesheet" href="../theme/night.css"> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror-fullscreen { | |
display: block; | |
position: absolute; | |
top: 0; left: 0; | |
width: 100%; | |
z-index: 9999; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Full Screen Editing</h1> | |
<form><textarea id="code" name="code" rows="5"> | |
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt> | |
<dd>Whether, when indenting, the first N*8 spaces should be | |
replaced by N tabs. Default is false.</dd> | |
<dt id="option_tabMode"><code>tabMode (string)</code></dt> | |
<dd>Determines what happens when the user presses the tab key. | |
Must be one of the following: | |
<dl> | |
<dt><code>"classic" (the default)</code></dt> | |
<dd>When nothing is selected, insert a tab. Otherwise, | |
behave like the <code>"shift"</code> mode. (When shift is | |
held, this behaves like the <code>"indent"</code> mode.)</dd> | |
<dt><code>"shift"</code></dt> | |
<dd>Indent all selected lines by | |
one <a href="#option_indentUnit"><code>indentUnit</code></a>. | |
If shift was held while pressing tab, un-indent all selected | |
lines one unit.</dd> | |
<dt><code>"indent"</code></dt> | |
<dd>Indent the line the 'correctly', based on its syntactic | |
context. Only works if the | |
mode <a href="#indent">supports</a> it.</dd> | |
<dt><code>"default"</code></dt> | |
<dd>Do not capture tab presses, let the browser apply its | |
default behaviour (which usually means it skips to the next | |
control).</dd> | |
</dl></dd> | |
<dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
<dd>Determines whether and how new lines are indented when the | |
enter key is pressed. The following modes are supported: | |
<dl> | |
<dt><code>"indent" (the default)</code></dt> | |
<dd>Use the mode's indentation rules to give the new line | |
the correct indentation.</dd> | |
<dt><code>"keep"</code></dt> | |
<dd>Indent the line the same as the previous line.</dd> | |
<dt><code>"flat"</code></dt> | |
<dd>Do not indent the new line.</dd> | |
</dl></dd> | |
<dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
<dd>Determines whether and how new lines are indented when the | |
enter key is pressed. The following modes are supported: | |
<dl> | |
<dt><code>"indent" (the default)</code></dt> | |
<dd>Use the mode's indentation rules to give the new line | |
the correct indentation.</dd> | |
<dt><code>"keep"</code></dt> | |
<dd>Indent the line the same as the previous line.</dd> | |
<dt><code>"flat"</code></dt> | |
<dd>Do not indent the new line.</dd> | |
</dl></dd> | |
<dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
<dd>Determines whether and how new lines are indented when the | |
enter key is pressed. The following modes are supported: | |
<dl> | |
<dt><code>"indent" (the default)</code></dt> | |
<dd>Use the mode's indentation rules to give the new line | |
the correct indentation.</dd> | |
<dt><code>"keep"</code></dt> | |
<dd>Indent the line the same as the previous line.</dd> | |
<dt><code>"flat"</code></dt> | |
<dd>Do not indent the new line.</dd> | |
</dl></dd> | |
<dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
<dd>Determines whether and how new lines are indented when the | |
enter key is pressed. The following modes are supported: | |
<dl> | |
<dt><code>"indent" (the default)</code></dt> | |
<dd>Use the mode's indentation rules to give the new line | |
the correct indentation.</dd> | |
<dt><code>"keep"</code></dt> | |
<dd>Indent the line the same as the previous line.</dd> | |
<dt><code>"flat"</code></dt> | |
<dd>Do not indent the new line.</dd> | |
</dl></dd> | |
</textarea></form> | |
<script> | |
function isFullScreen(cm) { | |
return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className); | |
} | |
function winHeight() { | |
return window.innerHeight || (document.documentElement || document.body).clientHeight; | |
} | |
function setFullScreen(cm, full) { | |
var wrap = cm.getWrapperElement(), scroll = cm.getScrollerElement(); | |
if (full) { | |
wrap.className += " CodeMirror-fullscreen"; | |
scroll.style.height = winHeight() + "px"; | |
document.documentElement.style.overflow = "hidden"; | |
} else { | |
wrap.className = wrap.className.replace(" CodeMirror-fullscreen", ""); | |
scroll.style.height = ""; | |
document.documentElement.style.overflow = ""; | |
} | |
cm.refresh(); | |
} | |
CodeMirror.connect(window, "resize", function() { | |
var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0]; | |
if (!showing) return; | |
showing.CodeMirror.getScrollerElement().style.height = winHeight() + "px"; | |
}); | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
theme: "night", | |
extraKeys: { | |
"F11": function(cm) { | |
setFullScreen(cm, !isFullScreen(cm)); | |
}, | |
"Esc": function(cm) { | |
if (isFullScreen(cm)) setFullScreen(cm, false); | |
} | |
} | |
}); | |
</script> | |
<p>Press <strong>F11</strong> when cursor is in the editor to toggle full screen editing. <strong>Esc</strong> can also be used to <i>exit</i> full screen editing.</p> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Lazy Mode Loading Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/loadmode.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Lazy Mode Loading</h1> | |
<form><textarea id="code" name="code">This is the editor. | |
// It starts out in plain text mode, | |
# use the control below to load and apply a mode | |
"you'll see the highlighting of" this text /*change*/. | |
</textarea></form> | |
<p><input type=text value=javascript id=mode> <button type=button onclick="change()">change mode</button></p> | |
<script> | |
CodeMirror.modeURL = "../mode/%N/%N.js"; | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true | |
}); | |
var modeInput = document.getElementById("mode"); | |
CodeMirror.connect(modeInput, "keypress", function(e) { | |
if (e.keyCode == 13) change(); | |
}); | |
function change() { | |
editor.setOption("mode", modeInput.value); | |
CodeMirror.autoLoadMode(editor, modeInput.value); | |
} | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Breakpoint Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/javascript/javascript.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror-gutter { | |
width: 3em; | |
background: white; | |
} | |
.CodeMirror { | |
border: 1px solid #aaa; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Breakpoint demo</h1> | |
<form><textarea id="code" name="code"> | |
CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
onGutterClick: function(cm, n) { | |
var info = cm.lineInfo(n); | |
if (info.markerText) | |
cm.clearMarker(n); | |
else | |
cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%"); | |
} | |
}); | |
</textarea></form> | |
<p>Click the line-number gutter to add or remove 'breakpoints'.</p> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
onGutterClick: function(cm, n) { | |
var info = cm.lineInfo(n); | |
if (info.markerText) | |
cm.clearMarker(n); | |
else | |
cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%"); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Match Highlighter Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/searchcursor.js"></script> | |
<script src="../lib/util/match-highlighter.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
span.CodeMirror-matchhighlight { background: #e9e9e9 } | |
.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Match Highlighter Demo</h1> | |
<form><textarea id="code" name="code">Select this text: hardToSpotVar | |
And everywhere else in your code where hardToSpotVar appears will automatically illuminate. | |
Give it a try! No more hardToSpotVars.</textarea></form> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers : true, | |
onCursorActivity: function() { | |
editor.matchHighlight("CodeMirror-matchhighlight"); | |
} | |
}); | |
</script> | |
<p>Highlight matches of selected text on select</p> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Multiplexing Parser Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/multiplex.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border: 1px solid black;} | |
.cm-delimit {color: #fa4;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Multiplexing Parser Demo</h1> | |
<form><textarea id="code" name="code"> | |
<html> | |
<body style="<<magic>>"> | |
<h1><< this is not <html >></h1> | |
<< | |
multiline | |
not html | |
at all : &amp; <link/> | |
>> | |
<p>this is html again</p> | |
</body> | |
</html> | |
</textarea></form> | |
<script> | |
CodeMirror.defineMode("demo", function(config) { | |
return CodeMirror.multiplexingMode( | |
CodeMirror.getMode(config, "text/html"), | |
{open: "<<", close: ">>", | |
mode: CodeMirror.getMode(config, "text/plain"), | |
delimStyle: "delimit"} | |
// .. more multiplexed styles can follow here | |
); | |
}); | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
mode: "demo", | |
lineNumbers: true, | |
lineWrapping: true | |
}); | |
</script> | |
<p>Demonstration of a multiplexing mode, which, at certain | |
boundary strings, switches to one or more inner modes. The out | |
(HTML) mode does not get fed the content of the <code><< | |
>></code> blocks. See | |
the <a href="../doc/manual.html#util_multiplex">manual</a> and | |
the <a href="../lib/util/multiplex.js">source</a> for more | |
information.</p> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Overlay Parser Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/overlay.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border: 1px solid black;} | |
.cm-mustache {color: #0ca;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Overlay Parser Demo</h1> | |
<form><textarea id="code" name="code"> | |
<html> | |
<body> | |
<h1>{{title}}</h1> | |
<p>These are links to {{things}}:</p> | |
<ul>{{#links}} | |
<li><a href="{{url}}">{{text}}</a></li> | |
{{/links}}</ul> | |
</body> | |
</html> | |
</textarea></form> | |
<script> | |
CodeMirror.defineMode("mustache", function(config, parserConfig) { | |
var mustacheOverlay = { | |
token: function(stream, state) { | |
var ch; | |
if (stream.match("{{")) { | |
while ((ch = stream.next()) != null) | |
if (ch == "}" && stream.next() == "}") break; | |
stream.eat("}"); | |
return "mustache"; | |
} | |
while (stream.next() != null && !stream.match("{{", false)) {} | |
return null; | |
} | |
}; | |
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay); | |
}); | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"}); | |
</script> | |
<p>Demonstration of a mode that parses HTML, highlighting | |
the <a href="http://mustache.github.com/">Mustache</a> templating | |
directives inside of it by using the code | |
in <a href="../lib/util/overlay.js"><code>overlay.js</code></a>. View | |
source to see the 15 lines of code needed to accomplish this.</p> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: HTML5 preview</title> | |
<script src=../lib/codemirror.js></script> | |
<script src=../mode/xml/xml.js></script> | |
<script src=../mode/javascript/javascript.js></script> | |
<script src=../mode/css/css.js></script> | |
<script src=../mode/htmlmixed/htmlmixed.js></script> | |
<link rel=stylesheet href=../lib/codemirror.css> | |
<link rel=stylesheet href=../doc/docs.css> | |
<style type=text/css> | |
.CodeMirror { | |
float: left; | |
width: 50%; | |
border: 1px solid black; | |
} | |
iframe { | |
width: 49%; | |
float: left; | |
height: 300px; | |
border: 1px solid black; | |
border-left: 0px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: HTML5 preview</h1> | |
<textarea id=code name=code> | |
<!doctype html> | |
<html> | |
<head> | |
<meta charset=utf-8> | |
<title>HTML5 canvas demo</title> | |
<style>p {font-family: monospace;}</style> | |
</head> | |
<body> | |
<p>Canvas pane goes here:</p> | |
<canvas id=pane width=300 height=200></canvas> | |
<script> | |
var canvas = document.getElementById('pane'); | |
var context = canvas.getContext('2d'); | |
context.fillStyle = 'rgb(250,0,0)'; | |
context.fillRect(10, 10, 55, 50); | |
context.fillStyle = 'rgba(0, 0, 250, 0.5)'; | |
context.fillRect(30, 30, 55, 50); | |
</script> | |
</body> | |
</html></textarea> | |
<iframe id=preview></iframe> | |
<script> | |
var delay; | |
// Initialize CodeMirror editor with a nice html5 canvas demo. | |
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { | |
mode: 'text/html', | |
tabMode: 'indent', | |
onChange: function() { | |
clearTimeout(delay); | |
delay = setTimeout(updatePreview, 300); | |
} | |
}); | |
function updatePreview() { | |
var previewFrame = document.getElementById('preview'); | |
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; | |
preview.open(); | |
preview.write(editor.getValue()); | |
preview.close(); | |
} | |
setTimeout(updatePreview, 300); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Autoresize Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/css/css.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror { | |
border: 1px solid #eee; | |
} | |
.CodeMirror-scroll { | |
height: auto; | |
overflow-y: hidden; | |
overflow-x: auto; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Autoresize demo</h1> | |
<form><textarea id="code" name="code"> | |
.CodeMirror-scroll { | |
height: auto; | |
overflow-y: hidden; | |
overflow-x: auto; | |
}</textarea></form> | |
<p>By setting a few CSS properties, CodeMirror can be made to | |
automatically resize to fit its content.</p> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Mode Runner Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/runmode.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
</head> | |
<body> | |
<h1>CodeMirror: Mode Runner Demo</h1> | |
<textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;"> | |
<foobar> | |
<blah>Enter your xml here and press the button below to display | |
it as highlighted by the CodeMirror XML mode</blah> | |
<tag2 foo="2" bar="&quot;bar&quot;"/> | |
</foobar></textarea><br> | |
<button onclick="doHighlight();">Highlight!</button> | |
<pre id="output" class="cm-s-default"></pre> | |
<script> | |
function doHighlight() { | |
CodeMirror.runMode(document.getElementById("code").value, "application/xml", | |
document.getElementById("output")); | |
} | |
</script> | |
<p>Running a CodeMirror mode outside of the editor. | |
The <code>CodeMirror.runMode</code> function, defined | |
in <code><a href="../lib/util/runmode.js">lib/runmode.js</a></code> takes the following arguments:</p> | |
<dl> | |
<dt><code>text (string)</code></dt> | |
<dd>The document to run through the highlighter.</dd> | |
<dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt> | |
<dd>The mode to use (must be loaded as normal).</dd> | |
<dt><code>output (function or DOM node)</code></dt> | |
<dd>If this is a function, it will be called for each token with | |
two arguments, the token's text and the token's style class (may | |
be <code>null</code> for unstyled tokens). If it is a DOM node, | |
the tokens will be converted to <code>span</code> elements as in | |
an editor, and inserted into the node | |
(through <code>innerHTML</code>).</dd> | |
</dl> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Search/Replace Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<script src="../lib/util/dialog.js"></script> | |
<link rel="stylesheet" href="../lib/util/dialog.css"> | |
<script src="../lib/util/searchcursor.js"></script> | |
<script src="../lib/util/search.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
dt {font-family: monospace; color: #666;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Search/Replace Demo</h1> | |
<form><textarea id="code" name="code"> | |
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt> | |
<dd>Whether, when indenting, the first N*8 spaces should be | |
replaced by N tabs. Default is false.</dd> | |
<dt id="option_tabMode"><code>tabMode (string)</code></dt> | |
<dd>Determines what happens when the user presses the tab key. | |
Must be one of the following: | |
<dl> | |
<dt><code>"classic" (the default)</code></dt> | |
<dd>When nothing is selected, insert a tab. Otherwise, | |
behave like the <code>"shift"</code> mode. (When shift is | |
held, this behaves like the <code>"indent"</code> mode.)</dd> | |
<dt><code>"shift"</code></dt> | |
<dd>Indent all selected lines by | |
one <a href="#option_indentUnit"><code>indentUnit</code></a>. | |
If shift was held while pressing tab, un-indent all selected | |
lines one unit.</dd> | |
<dt><code>"indent"</code></dt> | |
<dd>Indent the line the 'correctly', based on its syntactic | |
context. Only works if the | |
mode <a href="#indent">supports</a> it.</dd> | |
<dt><code>"default"</code></dt> | |
<dd>Do not capture tab presses, let the browser apply its | |
default behaviour (which usually means it skips to the next | |
control).</dd> | |
</dl></dd> | |
<dt id="option_enterMode"><code>enterMode (string)</code></dt> | |
<dd>Determines whether and how new lines are indented when the | |
enter key is pressed. The following modes are supported: | |
<dl> | |
<dt><code>"indent" (the default)</code></dt> | |
<dd>Use the mode's indentation rules to give the new line | |
the correct indentation.</dd> | |
<dt><code>"keep"</code></dt> | |
<dd>Indent the line the same as the previous line.</dd> | |
<dt><code>"flat"</code></dt> | |
<dd>Do not indent the new line.</dd> | |
</dl></dd> | |
</textarea></form> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", lineNumbers: true}); | |
</script> | |
<p>Demonstration of primitive search/replace functionality. The | |
keybindings (which can be overridden by custom keymaps) are:</p> | |
<dl> | |
<dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd> | |
<dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd> | |
<dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd> | |
<dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd> | |
<dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd> | |
</dl> | |
<p>Searching is enabled by | |
including <a href="../lib/util/search.js">lib/util/search.js</a> | |
and <a href="../lib/util/searchcursor.js">lib/util/searchcursor.js</a>. | |
For good-looking input dialogs, you also want to include | |
<a href="../lib/util/dialog.js">lib/util/dialog.js</a> | |
and <a href="../lib/util/dialog.css">lib/util/dialog.css</a>.</p> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Theme Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.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/ambiance.css"> | |
<link rel="stylesheet" href="../theme/blackboard.css"> | |
<link rel="stylesheet" href="../theme/vibrant-ink.css"> | |
<script src="../mode/javascript/javascript.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border: 1px solid black; font-size:13px} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Theme demo</h1> | |
<form><textarea id="code" name="code"> | |
function findSequence(goal) { | |
function find(start, history) { | |
if (start == goal) | |
return history; | |
else if (start > goal) | |
return null; | |
else | |
return find(start + 5, "(" + history + " + 5)") || | |
find(start * 3, "(" + history + " * 3)"); | |
} | |
return find(1, "1"); | |
}</textarea></form> | |
<p>Select a theme: <select onchange="selectTheme()" id=select> | |
<option selected>default</option> | |
<option>ambiance</option> | |
<option>blackboard</option> | |
<option>cobalt</option> | |
<option>eclipse</option> | |
<option>elegant</option> | |
<option>erlang-dark</option> | |
<option>lesser-dark</option> | |
<option>monokai</option> | |
<option>neat</option> | |
<option>night</option> | |
<option>rubyblue</option> | |
<option>vibrant-ink</option> | |
<option>xq-dark</option> | |
</select> | |
</p> | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true | |
}); | |
var input = document.getElementById("select"); | |
function selectTheme() { | |
var theme = input.options[input.selectedIndex].innerHTML; | |
editor.setOption("theme", theme); | |
} | |
var choice = document.location.search && document.location.search.slice(1); | |
if (choice) { | |
input.value = choice; | |
editor.setOption("theme", choice); | |
} | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Vim bindings demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/clike/clike.js"></script> | |
<script src="../keymap/vim.js"></script> | |
<script src="../lib/util/dialog.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<link rel="stylesheet" href="../lib/util/dialog.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Vim bindings demo</h1> | |
<form><textarea id="code" name="code"> | |
#include "syscalls.h" | |
/* getchar: simple buffered version */ | |
int getchar(void) | |
{ | |
static char buf[BUFSIZ]; | |
static char *bufp = buf; | |
static int n = 0; | |
if (n == 0) { /* buffer is empty */ | |
n = read(0, buf, sizeof buf); | |
bufp = buf; | |
} | |
return (--n >= 0) ? (unsigned char) *bufp++ : EOF; | |
} | |
</textarea></form> | |
<p>The vim keybindings are enabled by | |
including <a href="../keymap/vim.js">keymap/vim.js</a> and setting | |
the <code>keyMap</code> option to <code>"vim"</code>. Because | |
CodeMirror's internal API is quite different from Vim, they are only | |
a loose approximation of actual vim bindings, though.</p> | |
<script> | |
CodeMirror.commands.save = function(){ alert("Saving"); }; | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
mode: "text/x-csrc", | |
keyMap: "vim" | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: Visible tabs demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../mode/clike/clike.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css"> | |
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} | |
.cm-tab { | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); | |
background-position: right; | |
background-repeat: no-repeat; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CodeMirror: Visible tabs demo</h1> | |
<form><textarea id="code" name="code"> | |
#include "syscalls.h" | |
/* getchar: simple buffered version */ | |
int getchar(void) | |
{ | |
static char buf[BUFSIZ]; | |
static char *bufp = buf; | |
static int n = 0; | |
if (n == 0) { /* buffer is empty */ | |
n = read(0, buf, sizeof buf); | |
bufp = buf; | |
} | |
return (--n >= 0) ? (unsigned char) *bufp++ : EOF; | |
} | |
</textarea></form> | |
<p>Tabs inside the editor are spans with the | |
class <code>cm-tab</code>, and can be styled. | |
<script> | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
lineNumbers: true, | |
tabSize: 4, | |
indentUnit: 4, | |
indentWithTabs: true, | |
mode: "text/x-csrc" | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CodeMirror: XML Autocomplete Demo</title> | |
<link rel="stylesheet" href="../lib/codemirror.css"> | |
<script src="../lib/codemirror.js"></script> | |
<script src="../lib/util/simple-hint.js"></script> | |
<link rel="stylesheet" href="../lib/util/simple-hint.css"> | |
<script src="../lib/util/closetag.js"></script> | |
<script src="../lib/util/xml-hint.js"></script> | |
<script src="../mode/xml/xml.js"></script> | |
<link rel="stylesheet" href="../doc/docs.css"> | |
<style type="text/css">.CodeMirror {border: 1px solid #eee;} .CodeMirror-scroll { height: 100% }</style> | |
</head> | |
<body> | |
<h1>CodeMirror: XML Autocomplete demo</h1> | |
<form><textarea id="code" name="code"></textarea></form> | |
<p>Type '<' or space inside tag or | |
press <strong>ctrl-space</strong> to activate autocompletion. See | |
the code (<a href="../lib/util/simple-hint.js">here</a> | |
and <a href="../lib/util/xml-hint.js">here</a>) to figure out how | |
it works.</p> | |
<script> | |
CodeMirror.xmlHints['<'] = [ | |
'levelTop', | |
'levelRoot', | |
'mainLevel' | |
]; | |
CodeMirror.xmlHints['<levelTop '] = | |
CodeMirror.xmlHints['<levelRoot '] = | |
CodeMirror.xmlHints['<mainLevel '] = [ | |
'property1111', | |
'property2222' | |
]; | |
CodeMirror.xmlHints['<levelTop><'] = | |
CodeMirror.xmlHints['<levelRoot><'] = | |
CodeMirror.xmlHints['<mainLevel><'] = [ | |
'second', | |
'two' | |
]; | |
CodeMirror.xmlHints['<levelTop><second '] = [ | |
'secondProperty' | |
]; | |
CodeMirror.xmlHints['<levelTop><second><'] = [ | |
'three', | |
'x-three' | |
]; | |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
value: '', | |
mode: 'text/html', | |
lineNumbers: true, | |
extraKeys: { | |
"'>'": function(cm) { cm.closeTag(cm, '>'); }, | |
"'/'": function(cm) { cm.closeTag(cm, '/'); }, | |
"' '": function(cm) { CodeMirror.xmlHint(cm, ' '); }, | |
"'<'": function(cm) { CodeMirror.xmlHint(cm, '<'); }, | |
"Ctrl-Space": function(cm) { CodeMirror.xmlHint(cm, ''); } | |
} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |