ext-static_highlight.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. ace.define("ace/ext/static_highlight",["require","exports","module","ace/edit_session","ace/layer/text","ace/config","ace/lib/dom"], function(require, exports, module) {
  2. "use strict";
  3. var EditSession = require("../edit_session").EditSession;
  4. var TextLayer = require("../layer/text").Text;
  5. var baseStyles = ".ace_static_highlight {\
  6. font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Droid Sans Mono', monospace;\
  7. font-size: 12px;\
  8. white-space: pre-wrap\
  9. }\
  10. .ace_static_highlight .ace_gutter {\
  11. width: 2em;\
  12. text-align: right;\
  13. padding: 0 3px 0 0;\
  14. margin-right: 3px;\
  15. }\
  16. .ace_static_highlight.ace_show_gutter .ace_line {\
  17. padding-left: 2.6em;\
  18. }\
  19. .ace_static_highlight .ace_line { position: relative; }\
  20. .ace_static_highlight .ace_gutter-cell {\
  21. -moz-user-select: -moz-none;\
  22. -khtml-user-select: none;\
  23. -webkit-user-select: none;\
  24. user-select: none;\
  25. top: 0;\
  26. bottom: 0;\
  27. left: 0;\
  28. position: absolute;\
  29. }\
  30. .ace_static_highlight .ace_gutter-cell:before {\
  31. content: counter(ace_line, decimal);\
  32. counter-increment: ace_line;\
  33. }\
  34. .ace_static_highlight {\
  35. counter-reset: ace_line;\
  36. }\
  37. ";
  38. var config = require("../config");
  39. var dom = require("../lib/dom");
  40. var SimpleTextLayer = function() {
  41. this.config = {};
  42. };
  43. SimpleTextLayer.prototype = TextLayer.prototype;
  44. var highlight = function(el, opts, callback) {
  45. var m = el.className.match(/lang-(\w+)/);
  46. var mode = opts.mode || m && ("ace/mode/" + m[1]);
  47. if (!mode)
  48. return false;
  49. var theme = opts.theme || "ace/theme/textmate";
  50. var data = "";
  51. var nodes = [];
  52. if (el.firstElementChild) {
  53. var textLen = 0;
  54. for (var i = 0; i < el.childNodes.length; i++) {
  55. var ch = el.childNodes[i];
  56. if (ch.nodeType == 3) {
  57. textLen += ch.data.length;
  58. data += ch.data;
  59. } else {
  60. nodes.push(textLen, ch);
  61. }
  62. }
  63. } else {
  64. data = dom.getInnerText(el);
  65. if (opts.trim)
  66. data = data.trim();
  67. }
  68. highlight.render(data, mode, theme, opts.firstLineNumber, !opts.showGutter, function (highlighted) {
  69. dom.importCssString(highlighted.css, "ace_highlight");
  70. el.innerHTML = highlighted.html;
  71. var container = el.firstChild.firstChild;
  72. for (var i = 0; i < nodes.length; i += 2) {
  73. var pos = highlighted.session.doc.indexToPosition(nodes[i]);
  74. var node = nodes[i + 1];
  75. var lineEl = container.children[pos.row];
  76. lineEl && lineEl.appendChild(node);
  77. }
  78. callback && callback();
  79. });
  80. };
  81. highlight.render = function(input, mode, theme, lineStart, disableGutter, callback) {
  82. var waiting = 1;
  83. var modeCache = EditSession.prototype.$modes;
  84. if (typeof theme == "string") {
  85. waiting++;
  86. config.loadModule(['theme', theme], function(m) {
  87. theme = m;
  88. --waiting || done();
  89. });
  90. }
  91. var modeOptions;
  92. if (mode && typeof mode === "object" && !mode.getTokenizer) {
  93. modeOptions = mode;
  94. mode = modeOptions.path;
  95. }
  96. if (typeof mode == "string") {
  97. waiting++;
  98. config.loadModule(['mode', mode], function(m) {
  99. if (!modeCache[mode] || modeOptions)
  100. modeCache[mode] = new m.Mode(modeOptions);
  101. mode = modeCache[mode];
  102. --waiting || done();
  103. });
  104. }
  105. function done() {
  106. var result = highlight.renderSync(input, mode, theme, lineStart, disableGutter);
  107. return callback ? callback(result) : result;
  108. }
  109. return --waiting || done();
  110. };
  111. highlight.renderSync = function(input, mode, theme, lineStart, disableGutter) {
  112. lineStart = parseInt(lineStart || 1, 10);
  113. var session = new EditSession("");
  114. session.setUseWorker(false);
  115. session.setMode(mode);
  116. var textLayer = new SimpleTextLayer();
  117. textLayer.setSession(session);
  118. session.setValue(input);
  119. var stringBuilder = [];
  120. var length = session.getLength();
  121. for(var ix = 0; ix < length; ix++) {
  122. stringBuilder.push("<div class='ace_line'>");
  123. if (!disableGutter)
  124. stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + /*(ix + lineStart) + */ "</span>");
  125. textLayer.$renderLine(stringBuilder, ix, true, false);
  126. stringBuilder.push("\n</div>");
  127. }
  128. var html = "<div class='" + theme.cssClass + "'>" +
  129. "<div class='ace_static_highlight" + (disableGutter ? "" : " ace_show_gutter") +
  130. "' style='counter-reset:ace_line " + (lineStart - 1) + "'>" +
  131. stringBuilder.join("") +
  132. "</div>" +
  133. "</div>";
  134. textLayer.destroy();
  135. return {
  136. css: baseStyles + theme.cssText,
  137. html: html,
  138. session: session
  139. };
  140. };
  141. module.exports = highlight;
  142. module.exports.highlight =highlight;
  143. });
  144. (function() {
  145. ace.require(["ace/ext/static_highlight"], function() {});
  146. })();