Saving colorful JavaScript code samples

Introduction

There are times when a coder really needs a sample of code to be pretty for blogs, presentations, or to supplement other content. For these raw code in a text format is not good enough not matter how well beautified. Pretty Diff allows this feature by providing the jsscope parameter to JSPretty with the value html or by selecting the option HTML output under the option heading Scope Analysis (JavaScript Only) from the web tool. See multiple examples on one page or see the required JavaScript below for another example.

This feature works using the jsscope feature of the JSPretty library. The jsscope feature is intended to produce code that comprises an entire HTML document. The jsscope option is extended to allow immediate access for only enough HTML for formatting and description of the supplied code sample. As a result the necessary CSS and JavaScript code must be included separately.

Required code assets

JavaScript

  1. 1
  2. - 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. - 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  1. var pd = {};
  2. pd.beaufold = function dom__beaufold() {
  3. 'use strict';
  4. var self = this,
  5. title = self.getAttribute('title').split('line '),
  6. min = Number(title[1].substr(0, title[1].indexOf(' '))),
  7. max = Number(title[2]),
  8. a = 0,
  9. b = '',
  10. list = [
  11. self.parentNode.getElementsByTagName('li'), self.parentNode.nextSibling.getElementsByTagName('li')
  12. ];
  13. if (self.innerHTML.charAt(0) === '-') {
  14. for (a = min; a < max; a += 1) {
  15. list[0][a].style.display = 'none';
  16. list[1][a].style.display = 'none';
  17. }
  18. self.innerHTML = '+' + self.innerHTML.substr(1);
  19. } else {
  20. for (a = min; a < max; a += 1) {
  21. list[0][a].style.display = 'block';
  22. list[1][a].style.display = 'block';
  23. if (list[0][a].getAttribute('class') === 'fold' && list[0][a].innerHTML.charAt(0) === '+') {
  24. b = list[0][a].getAttribute('title');
  25. b = b.substring(b.indexOf('to line ') + 1);
  26. a = Number(b) - 1;
  27. }
  28. }
  29. self.innerHTML = '-' + self.innerHTML.substr(1);
  30. }
  31. };
  32. (function () {
  33. 'use strict';
  34. var lists = document.getElementsByTagName('ol'),
  35. listslen = lists.length,
  36. list = [],
  37. listlen = 0,
  38. a = 0,
  39. b = 0;
  40. for (a = 0; a < listslen; a += 1) {
  41. if (lists[a].getAttribute('class') === 'count' && lists[a].parentNode.getAttribute('class') === 'beautify') {
  42. list = lists[a].getElementsByTagName('li');
  43. listlen = list.length;
  44. for (b = 0; b < listlen; b += 1) {
  45. if (list[b].getAttribute('class') === 'fold') {
  46. list[b].onmousedown = pd.beaufold;
  47. }
  48. }
  49. }
  50. }
  51. }());

CSS