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

Create client-noconflict.html

Browse source 
Is this the right way to use the static highlighter with the 
noconflict build?

Edit as necessary. This is about as good as I can get it...

loads modules from script tags

makes div visible after highlighting

fixes display (sort of)

codeEl margin & padding 0

editor overflow auto, gutter position relative

replace code element with div

mode can be specified as a string

mode and theme may be specified as strings

This preserves the behavior of this method when specifying mode and
theme as objects. It adds the ability to specify mode and theme as
module paths. When specifying mode and / or theme as a module path you
must provide a callback function. The callback function will receive the
same value as the return value previously returned when specifying mode
and theme as objects.

Good stuff.

multiple elements with different modes and themes

The example shows multiple elements highlighted with different modes and
themes all in the same page. The pre element isn't ideal.

The example shows how to transfer the computed width and height of the
element into its inline style so that it won't dramatically change shape
and disrupt the page once it's had highlighting applied. It would
probably be better to replace the elements entirely and apply sizing
styles to the replacement elements but that isn't always an option.
This commit is contained in:
nightwing 2013-04-13 19:41:53 +04:00
commit 978d32eca3
2 changed files with 176 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,85 @@
<!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;
}
// I'm not exactly sure how to
// turn on softwrap like effects.
var longString = 'this will not wrap ******************************************';
// the scrollbars are from overflow auto on .ace_editor.
</pre>
<script src="../../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../../build/src-noconflict/ext-static_highlight.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
(function () {
ace.require([
"ace/ext/static_highlight",
"ace/lib/dom"
], function(highlighter, dom) {
var codeEls = Array.prototype.slice.call(
document.getElementsByClassName('code')
);
codeEls.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>