jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'remotes/origin/static_highlighter'

Browse source
This commit is contained in:
nightwing 2013-04-13 22:29:34 +04:00
commit 734a5b32f2
2 changed files with 122 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

71
demo/static-highlighter/client-noconflict.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Static Code highlighter using Ace</title>
<meta name="author" content="Matthew Kastor">
<style type="text/css">
.code {
width: 50%;
position: relative;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>Client Side Syntax Highlighting</h2>
<p>Syntax highlighting using Ace language modes and themes.</p>
<div class="code" ace-mode="ace/mode/css" ace-theme="ace/theme/chrome">
.code {
width: 50%;
position: relative;
white-space: pre-wrap;
}
</div>
<pre class="code" ace-mode="ace/mode/javascript" ace-theme="ace/theme/twilight">
function wobble (flam) {
return flam.wobbled = true;
}
// the scrollbars are from overflow auto on .ace_editor.
</pre>
<script src="../../build/src-noconflict/ace.js"></script>
<script src="../../build/src-noconflict/ext-static_highlight.js"></script>
<script>
var highlighter = ace.require("ace/ext/static_highlight")
var dom = ace.require("ace/lib/dom")
function qsa(sel) {
return [].slice.call(document.querySelectorAll(sel));
}
qsa(".code").forEach(function (codeEl) {
var cs = getComputedStyle(codeEl);
codeEl.style.cssText = codeEl.style.cssText +
'width: ' + cs.width + ';' +
'height: ' + cs.height + ';';
var mode = codeEl.getAttribute('ace-mode');
var theme = codeEl.getAttribute('ace-theme');
var data = codeEl.textContent.trim();
highlighter.render(data, mode, theme, 1, false, function (highlighted) {
dom.importCssString(highlighted.css, "ace_highlight");
dom.importCssString('.ace_editor { overflow: auto; ' +
'position:absolute; top:0; bottom:0; right:0; left:0; }' +
'.ace_gutter { position: relative; }',
'atropa_hial');
codeEl.innerHTML = highlighted.html;
});
});
</script>
</body>
</html>

53
lib/ace/ext/static_highlight.js
View file

@ -34,6 +34,55 @@ define(function(require, exports, module) {
var EditSession = require("../edit_session").EditSession;
var TextLayer = require("../layer/text").Text;
var baseStyles = require("../requirejs/text!./static.css");
var config = require("../config");
/**
* Transforms a given input code snippet into HTML using the given mode
*
* @param {string} input Code snippet
* @param {string|mode} mode String specifying the mode to load such as
* `ace/mode/javascript` or, a mode loaded from `/ace/mode`
* (use 'ServerSideHiglighter.getMode').
* @param {string|theme} theme String specifying the theme to load such as
* `ace/theme/twilight` or, a theme loaded from `/ace/theme`.
* @param {number} lineStart A number indicating the first line number. Defaults
* to 1.
* @param {boolean} disableGutter Specifies whether or not to disable the gutter.
* `true` disables the gutter, `false` enables the gutter. Defaults to `false`.
* @param {function} callback When specifying the mode or theme as a string,
* this method has no return value and you must specify a callback function. The
* callback will receive the rendered object containing the properties `html`
* and `css`.
* @returns {object} An object containing the properties `html` and `css`.
*/
exports.render = function(input, mode, theme, lineStart, disableGutter, callback) {
var waiting = 0
// if either the theme or the mode were specified as objects
// then we need to lazily load them.
if (typeof theme == "string") {
waiting++;
config.loadModule(['theme', theme], function (m) {
theme = m;
--waiting || done();
});
}
if (typeof mode == "string") {
waiting++;
config.loadModule(['mode', mode], function (m) {
mode = new m.Mode()
--waiting || done();
});
}
// loads or passes the specified mode module then calls renderer
function done() {
var result = exports.renderSync(input, mode, theme, lineStart, disableGutter);
return callback ? callback(result) : result;
}
return waiting || done();
};
/* Transforms a given input code snippet into HTML using the given mode
*
@ -43,12 +92,12 @@ var baseStyles = require("../requirejs/text!./static.css");
* @returns {object} An object containing: html, css
*/
exports.render = function(input, mode, theme, lineStart, disableGutter) {
exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
lineStart = parseInt(lineStart || 1, 10);
var session = new EditSession("");
session.setMode(mode);
session.setUseWorker(false);
session.setMode(mode);
var textLayer = new TextLayer(document.createElement("div"));
textLayer.setSession(session);