rspec-documentation 0.0.2 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop.yml +1 -0
  3. data/Gemfile.lock +3 -3
  4. data/Makefile +9 -0
  5. data/README.md +17 -21
  6. data/exe/rspec-documentation +5 -1
  7. data/lib/rspec/documentation/version.rb +1 -1
  8. data/lib/rspec/documentation.rb +1 -51
  9. data/lib/rspec_documentation/configuration.rb +17 -4
  10. data/lib/rspec_documentation/document.rb +17 -5
  11. data/lib/rspec_documentation/documentation.rb +85 -0
  12. data/lib/rspec_documentation/formatters/ansi.rb +44 -0
  13. data/lib/rspec_documentation/formatters/html.rb +31 -0
  14. data/lib/rspec_documentation/formatters/json.rb +32 -0
  15. data/lib/rspec_documentation/formatters/ruby.rb +31 -0
  16. data/lib/rspec_documentation/formatters/yaml.rb +36 -0
  17. data/lib/rspec_documentation/formatters.rb +20 -0
  18. data/lib/rspec_documentation/html_element.rb +21 -18
  19. data/lib/rspec_documentation/javascript_bundle.rb +17 -0
  20. data/lib/rspec_documentation/page_collection.rb +24 -9
  21. data/lib/rspec_documentation/page_tree.rb +16 -8
  22. data/lib/rspec_documentation/page_tree_element.rb +31 -9
  23. data/lib/rspec_documentation/parsed_document.rb +5 -3
  24. data/lib/rspec_documentation/project_initialization.rb +52 -0
  25. data/lib/rspec_documentation/rspec/failure.rb +20 -5
  26. data/lib/rspec_documentation/rspec.rb +0 -2
  27. data/lib/rspec_documentation/spec.rb +58 -12
  28. data/lib/rspec_documentation/stylesheet_bundle.rb +17 -0
  29. data/lib/rspec_documentation/summary.rb +87 -0
  30. data/lib/rspec_documentation/util.rb +12 -0
  31. data/lib/rspec_documentation.rb +16 -3
  32. data/lib/templates/000-Introduction.md.erb +35 -0
  33. data/lib/templates/010-Usage.md.erb +3 -0
  34. data/lib/templates/500-License.md.erb +3 -0
  35. data/lib/templates/bootstrap.js.erb +7 -0
  36. data/lib/templates/footer.html.erb +5 -0
  37. data/lib/templates/header.html.erb +16 -3
  38. data/lib/templates/layout.css.erb +381 -2
  39. data/lib/templates/layout.html.erb +13 -82
  40. data/lib/templates/layout.js.erb +67 -0
  41. data/lib/templates/modal_spec.html.erb +51 -0
  42. data/lib/templates/moon.svg.erb +1 -0
  43. data/lib/templates/script_tags.html.erb +1 -0
  44. data/lib/templates/stylesheet_links.html.erb +1 -0
  45. data/lib/templates/sun.svg.erb +1 -0
  46. data/lib/templates/tabbed_spec.html.erb +12 -49
  47. data/lib/templates/themes/bootstrap.min.css +11 -0
  48. data/lib/templates/themes/cerulean.css +5 -6
  49. data/lib/templates/themes/cosmo.css +5 -6
  50. data/lib/templates/themes/cyborg.css +5 -6
  51. data/lib/templates/themes/darkly.css +5 -6
  52. data/lib/templates/themes/flatly.css +5 -6
  53. data/lib/templates/themes/journal.css +5 -6
  54. data/lib/templates/themes/litera.css +5 -6
  55. data/lib/templates/themes/lumen.css +5 -6
  56. data/lib/templates/themes/lux.css +5 -6
  57. data/lib/templates/themes/materia.css +5 -6
  58. data/lib/templates/themes/minty.css +5 -6
  59. data/lib/templates/themes/morph.css +5 -6
  60. data/lib/templates/themes/pulse.css +5 -6
  61. data/lib/templates/themes/quartz.css +5 -6
  62. data/lib/templates/themes/sandstone.css +5 -6
  63. data/lib/templates/themes/simplex.css +5 -6
  64. data/lib/templates/themes/sketchy.css +5 -6
  65. data/lib/templates/themes/slate.css +5 -6
  66. data/lib/templates/themes/solar.css +5 -6
  67. data/lib/templates/themes/spacelab.css +5 -6
  68. data/lib/templates/themes/superhero.css +5 -6
  69. data/lib/templates/themes/united.css +5 -6
  70. data/lib/templates/themes/vapor.css +5 -6
  71. data/lib/templates/themes/yeti.css +5 -6
  72. data/lib/templates/themes/zephyr.css +5 -6
  73. data/rspec-documentation/pages/000-Introduction/000-Quickstart.md +17 -0
  74. data/rspec-documentation/pages/000-Introduction.md +14 -30
  75. data/rspec-documentation/pages/010-File System/000-Ordering.md +1 -1
  76. data/rspec-documentation/pages/010-File System/010-Documentation Bundle.md +9 -0
  77. data/rspec-documentation/pages/010-File System.md +1 -1
  78. data/rspec-documentation/pages/020-Running Tests.md +41 -0
  79. data/rspec-documentation/pages/030-Examples/010-Basic.md +51 -0
  80. data/rspec-documentation/pages/030-Examples/020-HTML.md +45 -0
  81. data/rspec-documentation/pages/030-Examples/030-ANSI.md +33 -0
  82. data/rspec-documentation/pages/030-Examples/040-JSON.md +39 -0
  83. data/rspec-documentation/pages/030-Examples/050-YAML.md +40 -0
  84. data/rspec-documentation/pages/030-Examples.md +7 -0
  85. data/rspec-documentation/pages/040-Spec Helper.md +11 -0
  86. data/rspec-documentation/pages/050-Linking.md +20 -0
  87. data/rspec-documentation/pages/060-Configuration/010-Context.md +26 -0
  88. data/rspec-documentation/pages/060-Configuration/020-Build Paths.md +33 -0
  89. data/rspec-documentation/pages/060-Configuration/030-Attribution.md +23 -0
  90. data/rspec-documentation/pages/060-Configuration.md +13 -0
  91. data/rspec-documentation/pages/070-Publishing.md +13 -0
  92. data/rspec-documentation/pages/500-License.md +11 -0
  93. data/rspec-documentation/spec_helper.rb +8 -0
  94. data/rspec-documentation.gemspec +2 -1
  95. metadata +46 -12
  96. data/lib/rspec_documentation/ansi_html.rb +0 -28
  97. data/lib/rspec_documentation/context.rb +0 -44
  98. data/lib/rspec_documentation/rspec/example_group.rb +0 -26
  99. data/lib/rspec_documentation/rspec/reporter.rb +0 -45
  100. data/rspec-documentation/pages/010-File System/010-Standalone Directories.md +0 -17
  101. data/rspec-documentation/pages/010-File System/020-Standalone Directory/Example Page.md +0 -3
  102. data/rspec-documentation/pages/020-Running Specs.md +0 -11
data/lib/templates/layout.html.erb CHANGED
@@ -1,100 +1,31 @@
1
1
  <html>
2
2
  <head>
3
- <style>
4
-
5
- /* cerulean, cosmo, cyborg, darkly, flatly, journal, litera, lumen, lux, materia, minty, morph,
6
- pulse, quartz, sandstone, simplex, sketchy, slate, solar, spacelab, superhero, united, vapor,
7
- yeti, zephyr */
8
- <%= RSpecDocumentation.theme(:materia) %>
9
-
10
- /* Base16, BlackWhiteTheme, Colorful, Github, Gruvbox, IgorPro, Magritte, Molokai, Monokai,
11
- MonokaiSublime, Pastie, ThankfulEyes, Tulip */
12
- <%= Rouge::Themes::Molokai.render %>
13
-
14
- /* https://stackoverflow.com/a/61587938 */
15
- .consistent-height .tab-content {
16
- display: flex;
17
- }
18
-
19
- .consistent-height .tab-content > .tab-pane {
20
- display: block; /* undo "display: none;" */
21
- visibility: hidden;
22
- margin-right: -100%;
23
- width: 100%;
24
- }
25
-
26
- .consistent-height .tab-content > .active {
27
- visibility: visible;
28
- }
29
-
30
-
31
- .code {
32
- font-family: monospace;
33
- max-height: 30rem;
34
- overflow-y: auto;
35
- }
36
-
37
- h1.title {
38
- display: inline;
39
- }
40
-
41
- .header .separator {
42
- display: inline-block;
43
- height: 2.5rem;
44
- }
45
-
46
- .version {
47
- font-size: 2rem;
48
- }
49
-
50
- .highlight {
51
- padding: 1rem;
52
- }
53
-
54
- .ansi-html {
55
- display: inline-block;
56
- background-color: #2e2e2e;
57
- border: 5px solid #2e2e2e;
58
- border-radius: 10px;
59
- }
60
-
61
- .ansi-html .ansi-color-0 { color: var(--bs-dark); }
62
- .ansi-html .ansi-color-1 { color: var(--bs-red); }
63
- .ansi-html .ansi-color-2 { color: var(--bs-green); }
64
- .ansi-html .ansi-color-3 { color: var(--bs-yellow) }
65
- .ansi-html .ansi-color-4 { color: var(--bs-blue); }
66
- .ansi-html .ansi-color-5 { color: var(--bs-purple); }
67
- .ansi-html .ansi-color-6 { color: var(--bs-cyan); }
68
- .ansi-html .ansi-color-7 { color: var(--bs-white); }
69
- .ansi-html .ansi-color-9 { color: var(--bs-light); }
70
- .ansi-html .ansi-color-reset { color: var(--bs-light);; }
71
-
72
- </style>
3
+ <meta charset="utf-8" />
4
+ <%= RSpecDocumentation.template(:stylesheet_links).result(binding) %>
73
5
  </head>
74
6
 
75
7
  <body>
76
8
  <div class="container m-3 p-3">
77
- <div class="bg-light sticky-top">
9
+ <div class="header-wrapper sticky-top">
78
10
  <%= header %>
79
11
  </div>
80
12
 
81
- <div class="row">
82
- <div class="col-auto page-tree fs-6 mt-1 ms-3 me-3">
83
- <% page_tree.elements.each do |element| %>
84
- <%= element %>
85
- <% end %>
13
+ <div class="row flex-nowrap">
14
+ <div class="col-sm-2 fs-6 mt-1 ms-3 me-3">
15
+ <ol class="page-tree hidden position-fixed">
16
+ <% page_tree.elements.each do |element| %>
17
+ <%= element %>
18
+ <% end %>
19
+ </ol>
86
20
  </div>
87
21
 
88
- <div class="col">
22
+ <div class="col content" style="max-width: 80%">
89
23
  <%= html %>
24
+ <%= footer %>
90
25
  </div>
91
26
  </div>
92
- <%= footer %>
93
27
  </div>
94
28
 
95
- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"
96
- integrity="sha512-i9cEfJwUwViEPFKdC1enz4ZRGBj8YQo6QByFTF92YXHi7waCqyexvRD75S5NVTsSiTv7rKWqG9Y5eFxmRsOn0A=="
97
- crossorigin="anonymous"
98
- referrerpolicy="no-referrer"></script>
29
+ <%= RSpecDocumentation.template(:script_tags).result(binding) %>
99
30
  </body>
100
31
  </html>
data/lib/templates/layout.js.erb ADDED
@@ -0,0 +1,67 @@
1
+ <%= RSpecDocumentation.template('bootstrap', :js).result %>
2
+
3
+ (() => {
4
+ const initPageTree = () => {
5
+ const pageTree = document.querySelector('.page-tree');
6
+
7
+ const getParentElement = (element) => document.querySelector(element.dataset.parentId);
8
+ const isRootElement = (element) => !getParentElement(element);
9
+ const isChildActive = (element) => !!element.querySelectorAll('.active').length;
10
+ const isSiblingActive = (element) => !!getParentElement(element).querySelectorAll('.active').length;
11
+ const isActive = (element) => element && element.classList.contains('active');
12
+ const isSelfOrParentActive = (element) => {
13
+ const listItemSelector = `[data-list-item-id="#${element.id}"]`;
14
+ const item = document.querySelector(listItemSelector);
15
+
16
+ if (isActive(item)) return true;
17
+ if (isActive(getParentElement(element))) return true;
18
+
19
+ return false;
20
+ };
21
+
22
+ const visibilityCriteria = [isRootElement, isSelfOrParentActive, isChildActive, isSiblingActive];
23
+
24
+ pageTree.querySelectorAll('li').forEach((element) => {
25
+ if (!visibilityCriteria.some((criterion) => criterion(element))) element.classList.add('d-none');
26
+ });
27
+ pageTree.classList.remove('hidden');
28
+ };
29
+
30
+ const initThemeSwitcher = () => {
31
+ const lightButton = document.querySelector('.theme-switcher .theme-light-icon');
32
+ const darkButton = document.querySelector('.theme-switcher .theme-dark-icon');
33
+ const html = document.querySelector('html');
34
+ const initialTheme = localStorage.getItem('rspec-documentation-theme') || 'light';
35
+
36
+ lightButton.addEventListener('click', () => {
37
+ lightButton.classList.add('d-none');
38
+ darkButton.classList.remove('d-none');
39
+ html.dataset.bsTheme = 'dark';
40
+ localStorage.setItem('rspec-documentation-theme', 'dark');
41
+ });
42
+
43
+ darkButton.addEventListener('click', () => {
44
+ darkButton.classList.add('d-none');
45
+ lightButton.classList.remove('d-none');
46
+ html.dataset.bsTheme = 'light';
47
+ localStorage.setItem('rspec-documentation-theme', 'light');
48
+ });
49
+
50
+ html.dataset.bsTheme = initialTheme;
51
+
52
+ if (initialTheme === 'light') {
53
+ lightButton.classList.remove('d-none');
54
+ } else {
55
+ darkButton.classList.remove('d-none');
56
+ }
57
+ };
58
+
59
+ document.querySelectorAll('button.modal-dialog-maximize').forEach((element) => {
60
+ element.addEventListener('click', () => {
61
+ document.querySelector(element.dataset.modalDialogId).classList.toggle('modal-fullscreen');
62
+ });
63
+ });
64
+
65
+ initPageTree();
66
+ initThemeSwitcher();
67
+ })();
data/lib/templates/modal_spec.html.erb ADDED
@@ -0,0 +1,51 @@
1
+ <div class="modal fade" id="modal-<%= element_id %>-side-by-side" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
2
+ <div class="modal-dialog modal-xl" id="modal-dialog-<%= element_id %>">
3
+ <div class="modal-content">
4
+ <div class="modal-header">
5
+ <h5 class="modal-title" id="modal-<%= element_id %>-side-by-side-label">Side-by-side view</h5>
6
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
7
+ </div>
8
+ <div class="modal-body">
9
+ <div class="container p-3">
10
+ <div class="row border">
11
+ <div class="col border">
12
+ <h5>Spec</h5>
13
+ <hr/>
14
+ <div class="p-3 mb-5 code highlight">
15
+ <%= code_source %>
16
+ </div>
17
+ </div>
18
+
19
+ <% unless prettified_output.nil? %>
20
+ <div class="col border">
21
+ <h5>Output</h5>
22
+ <hr/>
23
+ <div class="p-3 mb-5 code highlight">
24
+ <%= prettified_output %>
25
+ </div>
26
+ </div>
27
+ <% end %>
28
+
29
+ <div class="col border">
30
+ <% if prettified_output.nil? %>
31
+ <h5>Output</h5>
32
+ <% else %>
33
+ <h5>Rendered Output</h5>
34
+ <% end %>
35
+ <hr/>
36
+ <div class="p-3 mb-5 <%= render_raw? ? nil : 'code highlight' %>">
37
+ <%= rendered_output %>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <div class="modal-footer">
44
+ <button type="button"
45
+ class="btn btn-primary modal-dialog-maximize"
46
+ data-modal-dialog-id="#modal-dialog-<%= element_id %>">Full Screen</button>
47
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
data/lib/templates/moon.svg.erb ADDED
@@ -0,0 +1 @@
1
+ <svg class="d-none theme-icon theme-dark-icon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.56 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>Dark Mode</title><path class="cls-1" d="M121.85,87.3A64.31,64.31,0,1,1,36.88.4c2.94-1.37,5.92.91,4.47,4.47a56.29,56.29,0,0,0,75.75,77.4l.49-.27a3.41,3.41,0,0,1,4.61,4.61l-.35.69ZM92.46,74.67H92A16.11,16.11,0,0,0,76.2,58.93v-.52a15.08,15.08,0,0,0,11-4.72,15.19,15.19,0,0,0,4.72-11h.51a15.12,15.12,0,0,0,4.72,11,15.12,15.12,0,0,0,11,4.72v.51A16.13,16.13,0,0,0,92.46,74.67Zm10.09-46.59h-.27a7.94,7.94,0,0,0-2.49-5.81A7.94,7.94,0,0,0,94,19.78v-.27A7.94,7.94,0,0,0,99.79,17a8,8,0,0,0,2.49-5.8h.27A8,8,0,0,0,105,17a8,8,0,0,0,5.81,2.49v.27A8,8,0,0,0,105,22.27a7.94,7.94,0,0,0-2.49,5.81Zm-41.5,8h-.41a12.06,12.06,0,0,0-3.78-8.82A12.06,12.06,0,0,0,48,23.5v-.41a12.07,12.07,0,0,0,8.82-3.78,12.09,12.09,0,0,0,3.78-8.82h.41a12.08,12.08,0,0,0,3.77,8.82,12.09,12.09,0,0,0,8.83,3.78v.41a12.09,12.09,0,0,0-8.83,3.78,12.08,12.08,0,0,0-3.77,8.82Z"/></svg>
data/lib/templates/script_tags.html.erb ADDED
@@ -0,0 +1 @@
1
+ <script src="<%= javascript_bundle_src %>"></script>
data/lib/templates/stylesheet_links.html.erb ADDED
@@ -0,0 +1 @@
1
+ <link rel="stylesheet" href="<%= stylesheet_bundle_href %>" />
data/lib/templates/sun.svg.erb ADDED
@@ -0,0 +1 @@
1
+ <svg class="d-none theme-icon theme-light-icon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.cls-1{fill:#fcdb33;}</style></defs><title>Light Mode</title><path class="cls-1" d="M30,13.21A3.93,3.93,0,1,1,36.8,9.27L41.86,18A3.94,3.94,0,1,1,35.05,22L30,13.21Zm31.45,13A35.23,35.23,0,1,1,36.52,36.52,35.13,35.13,0,0,1,61.44,26.2ZM58.31,4A3.95,3.95,0,1,1,66.2,4V14.06a3.95,3.95,0,1,1-7.89,0V4ZM87.49,10.1A3.93,3.93,0,1,1,94.3,14l-5.06,8.76a3.93,3.93,0,1,1-6.81-3.92l5.06-8.75ZM109.67,30a3.93,3.93,0,1,1,3.94,6.81l-8.75,5.06a3.94,3.94,0,1,1-4-6.81L109.67,30Zm9.26,28.32a3.95,3.95,0,1,1,0,7.89H108.82a3.95,3.95,0,1,1,0-7.89Zm-6.15,29.18a3.93,3.93,0,1,1-3.91,6.81l-8.76-5.06A3.93,3.93,0,1,1,104,82.43l8.75,5.06ZM92.89,109.67a3.93,3.93,0,1,1-6.81,3.94L81,104.86a3.94,3.94,0,0,1,6.81-4l5.06,8.76Zm-28.32,9.26a3.95,3.95,0,1,1-7.89,0V108.82a3.95,3.95,0,1,1,7.89,0v10.11Zm-29.18-6.15a3.93,3.93,0,0,1-6.81-3.91l5.06-8.76A3.93,3.93,0,1,1,40.45,104l-5.06,8.75ZM13.21,92.89a3.93,3.93,0,1,1-3.94-6.81L18,81A3.94,3.94,0,1,1,22,87.83l-8.76,5.06ZM4,64.57a3.95,3.95,0,1,1,0-7.89H14.06a3.95,3.95,0,1,1,0,7.89ZM10.1,35.39A3.93,3.93,0,1,1,14,28.58l8.76,5.06a3.93,3.93,0,1,1-3.92,6.81L10.1,35.39Z"/></svg>
data/lib/templates/tabbed_spec.html.erb CHANGED
@@ -1,41 +1,4 @@
1
- <div class="modal fade" id="modal-<%= element_id %>-side-by-side" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
2
- <div class="modal-dialog modal-xl">
3
- <div class="modal-content">
4
- <div class="modal-header">
5
- <h5 class="modal-title" id="modal-<%= element_id %>-side-by-side-label">Side-by-side view</h5>
6
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
7
- </div>
8
- <div class="modal-body">
9
- <div class="container p-3">
10
- <div class="row border">
11
- <div class="col border">
12
- <div class="p-3 mb-5 code highlight">
13
- <%= code_source.gsub("\n", '<br/>').gsub(' ', '&nbsp;&nbsp;') %>
14
- </div>
15
- </div>
16
-
17
- <% unless html_source.nil? %>
18
- <div class="col border">
19
- <div class="p-3 mb-5 code highlight">
20
- <%= html_source.gsub("\n", '<br/>').gsub(' ', '&nbsp;&nbsp;') %>
21
- </div>
22
- </div>
23
- <% end %>
24
-
25
- <div class="col border">
26
- <div class="p-3 mb-5 <%= html_source.nil? ? 'code highlight' : nil %>">
27
- <%= rendered_result %>
28
- </div>
29
- </div>
30
- </div>
31
- </div>
32
- </div>
33
- <div class="modal-footer">
34
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
35
- </div>
36
- </div>
37
- </div>
38
- </div>
1
+ <%= RSpecDocumentation.template('modal_spec').result(binding) %>
39
2
 
40
3
  <div class="consistent-height">
41
4
 
@@ -49,10 +12,10 @@
49
12
  type="button"
50
13
  role="tab"
51
14
  aria-controls="code-source"
52
- aria-selected="true">Code</button>
15
+ aria-selected="true">Spec</button>
53
16
  </li>
54
17
 
55
- <% unless html_source.nil? %>
18
+ <% unless prettified_output.nil? %>
56
19
  <li class="nav-item" role="presentation">
57
20
  <button class="nav-link"
58
21
  id="html-source-<%= element_id %>-tab"
@@ -61,7 +24,7 @@
61
24
  type="button"
62
25
  role="tab"
63
26
  aria-controls="html-source"
64
- aria-selected="true">HTML</button>
27
+ aria-selected="true">Output</button>
65
28
  </li>
66
29
  <% end %>
67
30
 
@@ -73,7 +36,7 @@
73
36
  type="button"
74
37
  role="tab"
75
38
  aria-controls="rendered"
76
- aria-selected="false"><%= html_source.nil? ? 'Output' : 'Rendered HTML' %></button>
39
+ aria-selected="false"><%= prettified_output.nil? ? 'Output' : 'Rendered Output' %></button>
77
40
  </li>
78
41
 
79
42
  <li class="nav-item bs-auto ms-auto mb-2">
@@ -90,18 +53,18 @@
90
53
  id="code-source-<%= element_id %>"
91
54
  role="tabpanel"
92
55
  aria-labelledby="code-source-<%= element_id %>-tab">
93
- <div class="p-3 mb-5 code highlight">
94
- <%= code_source.gsub("\n", '<br/>').gsub(' ', '&nbsp;&nbsp;') %>
56
+ <div class="p-3 mb-5 mt-3 code highlight">
57
+ <%= code_source %>
95
58
  </div>
96
59
  </div>
97
60
 
98
- <% unless html_source.nil? %>
61
+ <% unless prettified_output.nil? %>
99
62
  <div class="tab-pane fade"
100
63
  id="html-source-<%= element_id %>"
101
64
  role="tabpanel"
102
65
  aria-labelledby="html-source-<%= element_id %>-tab">
103
- <div class="p-3 mb-5 code highlight">
104
- <%= html_source.gsub("\n", '<br/>').gsub(' ', '&nbsp;&nbsp;') %>
66
+ <div class="p-3 mb-5 mt-3 code highlight">
67
+ <%= prettified_output %>
105
68
  </div>
106
69
  </div>
107
70
  <% end %>
@@ -110,8 +73,8 @@
110
73
  id="rendered-<%= element_id %>"
111
74
  role="tabpanel"
112
75
  aria-labelledby="rendered-<%= element_id %>-tab">
113
- <div class="p-3 mb-5 <%= html_source.nil? ? 'code highlight' : nil %>">
114
- <%= rendered_result %>
76
+ <div class="p-3 mb-5 mt-3 <%= render_raw? ? nil : 'code highlight' %>">
77
+ <%= rendered_output %>
115
78
  </div>
116
79
  </div>
117
80
  </div>