Fix outputs of code not visible in Guide (#325)

webermayank · garg3133 · web-flow · commit 7f7b1fc0d710 · 2025-01-16T03:54:55.000+05:30
* fix issue #4327: Outputs of code not visible in Guide

* Few refactors.

---------

Co-authored-by: Priyansh Garg &lt;priyanshgarg30@gmail.com&gt;
diff --git a/docs/guide/ci-integrations/run-nightwatch-on-jenkins.md b/docs/guide/ci-integrations/run-nightwatch-on-jenkins.md
@@ -56,12 +56,10 @@ In order to run your tests on BrowserStack from Jenkins, setup the environment v
 
 Setup the following 2 environment variables
 
-```
-
-BROWSERSTACK_USERNAME
+<pre class="hide-indicator"><code class="language-bash">BROWSERSTACK_USERNAME
 BROWSERSTACK_ACCESS_KEY
+</code></pre>
 
-```
 
 ![Jenkins BrowserStack](https://user-images.githubusercontent.com/1677755/177569029-da96b37d-6377-404f-9562-315d0694997d.png)
 
diff --git a/docs/guide/concepts/test-globals.md b/docs/guide/concepts/test-globals.md
@@ -202,9 +202,8 @@ Pass the `--env integration` option to the runner:
 
 Then our globals object will look like:
 
-```
-myGlobalVar is: "integrated global"
-```
+<pre class="hide-indicator"><code class="language-bash">myGlobalVar is: "integrated global"
+</code></pre>
 
 ### Recommended content
 - [Use external globals in tests](/guide/writing-tests/using-test-globals.html)
diff --git a/docs/guide/configuration/define-test-environments.md b/docs/guide/configuration/define-test-environments.md
@@ -49,9 +49,8 @@ Test environments are referenced using the `--env` cli argument. Since we only h
 
 <pre class="language-bash"><code class="language-bash">npx nightwatch --env chrome-local</code></pre>
 
-```
-~/workspace/test-project % npx nightwatch --env chrome-local
- 
+<pre class="hide-indicator">
+<code class="language-bash">
 ┌──────────────────────────────────────────────────────────────────┐
 │                                                                  │
 │    Error: Invalid testing environment specified: chrome-local.   │
@@ -61,7 +60,8 @@ Test environments are referenced using the `--env` cli argument. Since we only h
 │                                                                  │
 │                                                                  │
 └──────────────────────────────────────────────────────────────────┘
-```
+</code>
+</pre>
 
 ### Define a new "chrome-local" environment
 
@@ -107,21 +107,20 @@ Run the sample and pass the `--env chrome-local` argument:
 <pre class="language-bash"><code class="language-bash">npx nightwatch --env chrome-local</code></pre>
 
 The output will look a bit like this:
-
-```
-[sample nightwatch test] Test Suite
+<pre class="hide-indicator"><code class="language-bash">[sample nightwatch test] Test Suite
 ──────────────────────────────────────────────────────────────────────
 ℹ Connected to ChromeDriver on port 9515 (844ms).
   Using: chrome (101.0.4951.64) on MAC OS X.
 
 
   Running opens the browser and checks for input:
-────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+──────────────────────────────────────────────────────────────────────
   ℹ Loaded url https://home.cern in 5531ms
   ✔ Testing if the page title equals 'Home | CERN' (6ms)
 
 OK. 1 assertions passed. (5.604s)
-```
+</code>
+</pre>
 
 ### Recommended content
 - [Concepts > Test environments](/guide/concepts/test-environments.html)
diff --git a/docs/guide/network-requests/capture-network-calls.md b/docs/guide/network-requests/capture-network-calls.md
@@ -72,8 +72,7 @@ All you need to do is call the `browser.captureNetworkRequests()` command with t
 
 Output from one of the network calls in the example above:
 
-```
-  Running Capture network calls:
+<pre class="hide-indicator"><code class="language-bash">Running Capture network calls:
 ───────────────────────────────────────────────────────────────────────────────────────────────────
 Request Number: 35
 Request URL: https://www.google.com/favicon.ico
@@ -94,7 +93,7 @@ Request headers: {
   'sec-ch-ua-model': '',
   'sec-ch-ua-platform': '"macOS"'
 }
-```
+</code></pre>
 
 ### Recommended content
 - [Chrome DevTools Protocol in Selenium 4](https://www.selenium.dev/documentation/webdriver/bidirectional/chrome_devtools/)
diff --git a/docs/guide/reporters/use-json-reporter.md b/docs/guide/reporters/use-json-reporter.md
@@ -23,12 +23,10 @@ Refer to the [Configuration > Output settings](/guide/configuration/customising-
 #### Via the CLI
 You can also configure the output folder at runtime via the CLI, using the `--output` flag :
 
-```javascript
-module.exports = { 
-    output_folder: 'tests_output' 
+<pre data-language="javascript"><code class="language-javascript">module.exports = {
+    output_folder: 'tests_output'
 }
-```
-
+</code></pre>
 
 <pre class="language-bash"><code class="language-bash">nightwatch --output ./tests-output</code></pre>
 
diff --git a/docs/guide/reporters/use-junit-reporter.md b/docs/guide/reporters/use-junit-reporter.md
@@ -34,13 +34,9 @@ Refer to the [CLI reference page](/guide/nightwatch-cli/command-line-options.htm
 
 The XML file name follows the pattern:
 
-<div class="hide-indicator"><pre>
-
-```
-<BROWSER>_<VERSION>__<testSuiteFileName>.xml
-```
-
-</pre></div>
+<pre class="hide-indicator">
+<code class="language-bash">&lt;BROWSER&gt;_&lt;VERSION&gt;__&lt;testSuiteFileName&gt;.xml
+</code></pre>
 
 ### Example
 
@@ -87,27 +83,23 @@ To generate both the built-in JUnit-XML and HTML reports, run the following comm
 
 The JUnit XML report should have been generated in the local `tests_output` folder inside the current project directory. It will look something like this:
 
-<div class="hide-indicator"><pre>
-
-```
-<?xml version="1.0" encoding="UTF-8" ?>
-<testsuites errors="0"
+<pre class="language-xml hide-indicator">
+<code class ="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;testsuites errors="0"
             failures="0"
-            tests="1">
+            tests="1"&gt;
 
-  <testsuite name="duckDuckGo"
+  &lt;testsuite name="duckDuckGo"
     errors="0" failures="0" hostname="" id="" package="duckDuckGo" skipped="0"
-    tests="1" time="2.007" timestamp="">
-  
-    <testcase name="Search Nightwatch.js and check results" classname="duckDuckGo" time="2.007" assertions="3">
-    </testcase>
-  </testsuite>
+    tests="1" time="2.007" timestamp=""&gt;
+
+    &lt;testcase name="Search Nightwatch.js and check results" classname="duckDuckGo" time="2.007" assertions="3">
+    &lt;/testcase&gt;
 
-</testsuites>
-</pre>
-```
+  &lt;/testsuite&gt;
 
-</pre></div>
+&lt;/testsuites&gt;
+</code></pre>
 
 ### Jenkins integration
 JUnit-formatted XML output integrates by default into Jenkins via the "Publish JUnit test result report" Post-build Action. 
diff --git a/docs/guide/running-tests/capture-console-messages.md b/docs/guide/running-tests/capture-console-messages.md
@@ -74,12 +74,11 @@ All you need to do is call the `browser.captureBrowserConsoleLogs()` command wit
 
 Output of the example above:
 
-```
-  Running Capture console messages:
-───────────────────────────────────────────────────────────────────────────────────────────────────
+<pre class="hide-indicator"><code class="language-bash">Running Capture console messages:
+─────────────────────────────────────────────────────────────────────────────────
 error 2022-06-10T13:38:22.082Z here
 No assertions ran.
-```
+</code></pre>
 
 ### Recommended content
 - [Capture Browser JS Exceptions](/guide/running-tests/catch-js-exceptions.html)
diff --git a/docs/guide/running-tests/catch-js-exceptions.md b/docs/guide/running-tests/catch-js-exceptions.md
@@ -67,9 +67,8 @@ Use the `browser.captureBrowserExceptions()` command with the required parameter
 
 Output of the example above:
 
-```
-  Running captureBrowserExceptions():
-───────────────────────────────────────────────────────────────────────────────────────────────────
+<pre class="hide-indicator"><code class="language-bash">Running captureBrowserExceptions():
+────────────────────────────────────────────────────────────────────────────────
 {
   exceptionDetails: {
     exceptionId: 1,
@@ -93,7 +92,9 @@ Output of the example above:
   timestamp: 2022-06-10T13:14:52.722Z
 }
 No assertions ran.
-```
+</code>
+</pre>
+
 
 ### Recommended content
 - [Capture browser console messages](/guide/running-tests/capture-console-messages.html)
