rspec-documentation 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>