prism-line-numbers.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. (function () {
  2. if (typeof self === 'undefined' || !self.Prism || !self.document) {
  3. return;
  4. }
  5. /**
  6. * Plugin name which is used as a class name for <pre> which is activating the plugin
  7. * @type {String}
  8. */
  9. var PLUGIN_NAME = 'line-numbers';
  10. /**
  11. * Regular expression used for determining line breaks
  12. * @type {RegExp}
  13. */
  14. var NEW_LINE_EXP = /\n(?!$)/g;
  15. /**
  16. * Global exports
  17. */
  18. var config = Prism.plugins.lineNumbers = {
  19. /**
  20. * Get node for provided line number
  21. * @param {Element} element pre element
  22. * @param {Number} number line number
  23. * @return {Element|undefined}
  24. */
  25. getLine: function (element, number) {
  26. if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {
  27. return;
  28. }
  29. var lineNumberRows = element.querySelector('.line-numbers-rows');
  30. var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
  31. var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);
  32. if (number < lineNumberStart) {
  33. number = lineNumberStart;
  34. }
  35. if (number > lineNumberEnd) {
  36. number = lineNumberEnd;
  37. }
  38. var lineIndex = number - lineNumberStart;
  39. return lineNumberRows.children[lineIndex];
  40. },
  41. /**
  42. * Resizes the line numbers of the given element.
  43. *
  44. * This function will not add line numbers. It will only resize existing ones.
  45. * @param {HTMLElement} element A `<pre>` element with line numbers.
  46. * @returns {void}
  47. */
  48. resize: function (element) {
  49. resizeElements([element]);
  50. },
  51. /**
  52. * Whether the plugin can assume that the units font sizes and margins are not depended on the size of
  53. * the current viewport.
  54. *
  55. * Setting this to `true` will allow the plugin to do certain optimizations for better performance.
  56. *
  57. * Set this to `false` if you use any of the following CSS units: `vh`, `vw`, `vmin`, `vmax`.
  58. *
  59. * @type {boolean}
  60. */
  61. assumeViewportIndependence: true
  62. };
  63. /**
  64. * Resizes the given elements.
  65. *
  66. * @param {HTMLElement[]} elements
  67. */
  68. function resizeElements(elements) {
  69. elements = elements.filter(function (e) {
  70. var codeStyles = getStyles(e);
  71. var whiteSpace = codeStyles['white-space'];
  72. return whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line';
  73. });
  74. if (elements.length == 0) {
  75. return;
  76. }
  77. var infos = elements.map(function (element) {
  78. var codeElement = element.querySelector('code');
  79. var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
  80. if (!codeElement || !lineNumbersWrapper) {
  81. return undefined;
  82. }
  83. /** @type {HTMLElement} */
  84. var lineNumberSizer = element.querySelector('.line-numbers-sizer');
  85. var codeLines = codeElement.textContent.split(NEW_LINE_EXP);
  86. if (!lineNumberSizer) {
  87. lineNumberSizer = document.createElement('span');
  88. lineNumberSizer.className = 'line-numbers-sizer';
  89. codeElement.appendChild(lineNumberSizer);
  90. }
  91. lineNumberSizer.innerHTML = '0';
  92. lineNumberSizer.style.display = 'block';
  93. var oneLinerHeight = lineNumberSizer.getBoundingClientRect().height;
  94. lineNumberSizer.innerHTML = '';
  95. return {
  96. element: element,
  97. lines: codeLines,
  98. lineHeights: [],
  99. oneLinerHeight: oneLinerHeight,
  100. sizer: lineNumberSizer,
  101. };
  102. }).filter(Boolean);
  103. infos.forEach(function (info) {
  104. var lineNumberSizer = info.sizer;
  105. var lines = info.lines;
  106. var lineHeights = info.lineHeights;
  107. var oneLinerHeight = info.oneLinerHeight;
  108. lineHeights[lines.length - 1] = undefined;
  109. lines.forEach(function (line, index) {
  110. if (line && line.length > 1) {
  111. var e = lineNumberSizer.appendChild(document.createElement('span'));
  112. e.style.display = 'block';
  113. e.textContent = line;
  114. } else {
  115. lineHeights[index] = oneLinerHeight;
  116. }
  117. });
  118. });
  119. infos.forEach(function (info) {
  120. var lineNumberSizer = info.sizer;
  121. var lineHeights = info.lineHeights;
  122. var childIndex = 0;
  123. for (var i = 0; i < lineHeights.length; i++) {
  124. if (lineHeights[i] === undefined) {
  125. lineHeights[i] = lineNumberSizer.children[childIndex++].getBoundingClientRect().height;
  126. }
  127. }
  128. });
  129. infos.forEach(function (info) {
  130. var lineNumberSizer = info.sizer;
  131. var wrapper = info.element.querySelector('.line-numbers-rows');
  132. lineNumberSizer.style.display = 'none';
  133. lineNumberSizer.innerHTML = '';
  134. info.lineHeights.forEach(function (height, lineNumber) {
  135. wrapper.children[lineNumber].style.height = height + 'px';
  136. });
  137. });
  138. }
  139. /**
  140. * Returns style declarations for the element
  141. * @param {Element} element
  142. */
  143. var getStyles = function (element) {
  144. if (!element) {
  145. return null;
  146. }
  147. return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
  148. };
  149. var lastWidth = undefined;
  150. window.addEventListener('resize', function () {
  151. if (config.assumeViewportIndependence && lastWidth === window.innerWidth) {
  152. return;
  153. }
  154. lastWidth = window.innerWidth;
  155. resizeElements(Array.prototype.slice.call(document.querySelectorAll('pre.' + PLUGIN_NAME)));
  156. });
  157. Prism.hooks.add('complete', function (env) {
  158. if (!env.code) {
  159. return;
  160. }
  161. var code = /** @type {Element} */ (env.element);
  162. var pre = /** @type {HTMLElement} */ (code.parentNode);
  163. // works only for <code> wrapped inside <pre> (not inline)
  164. if (!pre || !/pre/i.test(pre.nodeName)) {
  165. return;
  166. }
  167. // Abort if line numbers already exists
  168. if (code.querySelector('.line-numbers-rows')) {
  169. return;
  170. }
  171. // only add line numbers if <code> or one of its ancestors has the `line-numbers` class
  172. if (!Prism.util.isActive(code, PLUGIN_NAME)) {
  173. return;
  174. }
  175. // Remove the class 'line-numbers' from the <code>
  176. code.classList.remove(PLUGIN_NAME);
  177. // Add the class 'line-numbers' to the <pre>
  178. pre.classList.add(PLUGIN_NAME);
  179. var match = env.code.match(NEW_LINE_EXP);
  180. var linesNum = match ? match.length + 1 : 1;
  181. var lineNumbersWrapper;
  182. var lines = new Array(linesNum + 1).join('<span></span>');
  183. lineNumbersWrapper = document.createElement('span');
  184. lineNumbersWrapper.setAttribute('aria-hidden', 'true');
  185. lineNumbersWrapper.className = 'line-numbers-rows';
  186. lineNumbersWrapper.innerHTML = lines;
  187. if (pre.hasAttribute('data-start')) {
  188. pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
  189. }
  190. env.element.appendChild(lineNumbersWrapper);
  191. resizeElements([pre]);
  192. Prism.hooks.run('line-numbers', env);
  193. });
  194. Prism.hooks.add('line-numbers', function (env) {
  195. env.plugins = env.plugins || {};
  196. env.plugins.lineNumbers = true;
  197. });
  198. }());