Fix problems regarding code view and the raw text view

index.css

@@ -10,6 +10,10 @@
     list-style-type: decimal;
 }
 
+.md-raw {
+    white-space: pre-wrap;
+}
+
 #raw-text {
     display: none;
 }

index.js

@@ -10,12 +10,12 @@ const markdown = require("markdown-it")({
         // Commit ID: 3fbfccad359e278a4fbde106328b2b8e2e2242a7
         if (language && hljs.getLanguage(language)) {
             try {
-                return generateCodeText(hljs.highlight(language, text, true).value, true)
+                return generateCodeText(hljs.highlight(language, text, true).value, { isHighlighted: true })
             } catch (err) {
                 console.log(`Error at highlighting: ${err}`)
             }
         }
-        return generateCodeText(markdown.utils.escapeHtml(text), true)
+        return generateCodeText(markdown.utils.escapeHtml(text), { isHighlighted: true })
     },
     xhtmlOut: true,
     html: true
@@ -36,8 +36,20 @@ const TITLE = "Markdown Viewer"
 
 const _blockedElements = {}
 
-function generateCodeText(text, isHighlighted) {
-    return `<pre${isHighlighted ? ' class="hljs"' : ''}><code><div>${text}</div></code></pre>`
+function generateCodeText(text, options = {}) {
+    const defaults = {
+        isHighlighted: false,
+        isMdRawText: false
+    }
+    const actual = Object.assign({}, defaults, options)
+
+    const hljsClass = actual.isHighlighted ? "hljs" : ""
+    const mdRawClass = actual.isMdRawText ? "md-raw" : ""
+
+    const preClass = actual.isHighlighted || actual.isMdRawText
+        ? ` class="${[hljsClass, mdRawClass].join(" ")}"`
+        : ""
+    return `<pre${preClass}"><code><div>${text}</div></code></pre>`
 }
 
 const isInternalLink = url => url.startsWith("#")
@@ -113,6 +125,7 @@ function switchRawView(isRawView) {
     document.getElementById("content").style.display = isRawView ? "none" : "block"
     document.getElementById("raw-text").style.display = isRawView ? "block" : "none"
     updateStatusBar(isRawView ? "Raw text (leave with Escape key)" : "")
+    changeBlockedContentInfoVisibility(!isRawView)
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -131,7 +144,7 @@ electron.ipcRenderer.on("fileOpen", (_, filePath, internalTarget) => {
         electron.ipcRenderer.send("disableRawView")
     }
     document.getElementById("content").innerHTML = markdown.render(content)
-    document.getElementById("raw-text").innerHTML = generateCodeText(markdown.utils.escapeHtml(content), false)
+    document.getElementById("raw-text").innerHTML = generateCodeText(markdown.utils.escapeHtml(content), { isMdRawText: true })
 
     const documentDirectory = path.dirname(filePath)
     alterTags("a", link => {
@@ -218,7 +231,6 @@ electron.ipcRenderer.on("unblockAll", unblockAll)
 
 electron.ipcRenderer.on("viewRawText", () => {
     switchRawView(true)
-    changeBlockedContentInfoVisibility(false)
 })
 
 window.addEventListener('keyup', event => {

testfile.md

@@ -94,6 +94,12 @@ This should be code
 </html>
 ```
 
+### Very wide
+
+```
+Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Barcu ve a a a id a a a a morbi ut a. Bcras at a eni a a dapibus montes. Bnunc eu a ligula a ve a. Bante ut a platea at a leo id dictumst. Bdiam in ve. Bquam in ut purus et. Belit ve in a nam arcu dictum a. Bquis ut a volutpat consectetuer odio. Bquis ut. Berat ad conubia a congue sit a semper porta eu. Bnunc eu mi. Belit id a. Bante et a a rutrum ac a a per a. Bnibh eu. Bnibh in. Barcu ad. Bamet ad a. Bpede eu ut. Belit ve. Belit mi a ac a sem a. Bquis id nisl. Bodio eu a eni a nam. Bante in a a eu a a aptent. Bante eu a a a ac. Bnisl ad. Burna mi a a a eu tortor. Barcu ac. Bnisl id eu eni leo mi nisi a a a in class a erat. Bpede mi a non dis a a a a sed. Burna ut a a neque aptent a mi erat ante. Bodio eu nibh sem a sem at orci justo. Bdiam ac a imperdiet orci class a hac augue. Bante in. Berat at. Benim ac a mi per eget a. Borci id at ipsum. Belit ut a id fermentum netus et. Barcu eu a sit phasellus lectus id. Burna id at hac donec a a nibh est a. Bpede at eu at ut eros. Borci id ac eni a per proin rutrum mi a a a a laoreet. Bquam ac a. Burna et a justo volutpat magna ac. Burna eu a aenean quam eni per congue egestas arcu a a. Bduis id a a. Borci ut a id cum vel quam a vitae massa. Burna et a eni augue a cum a non a. Bante ac a a a litora ve a a. Bnisi ut a dis enim. Belit et. Bduis in. Bcras ad. Burna mi a a eget at a class nisi. Bnibh in a arcu ad a neque fames nisi phasellus. Burna et pede a a primis a. Bcras at ac lorem ve varius odio sit a dolor eget est mi egestas curae enim dui. Belit in a eros ac et nibh. Bamet ac a. Bduis id a maecenas a. Burna eu a in vel a. Bduis in a blandit tellus ad a quam a a tempus nunc in a a. Bnunc in id non a etiam. Bcras ve a a a a amet a cum a cum a netus a. Benim in. Bnibh ve id a a ad a. Bnisl at a taciti ornare a pellentesque. Bnisl id a a. Bquis mi. Beget mi id sit. Borci at mi sociis semper euismod amet a a cum eget urna. Bamet ve a cursus a ve a mauris in a hac ac a a. Bodio et a. Bamet at a a sit mi eget. Bquam eu a ve ut a platea a. Borci in a duis a ve in a quam nec. Berat ut a. Bduis et at a a a gravida aptent senectus varius. Barcu ac. Beget eu. Bnisl id a leo amet enim. Bnunc at. Bcras id nibh quis sit a. Barcu id aliquam cras a a a a. Bnisi ad quisque. Bnisi at a in nibh non a turpis. Bquam at a a tellus. Bante ut a cum per a ve a a congue. Bquis id mi primis id non. Bnibh ad a mus a. Bquam ve. Bnunc et a maecenas. Burna ac. Burna ut. Benim ut a cum metus ad a et nam non. Bnisi at. Bnunc at a a a ante a sit a cras leo a. Bnibh at diam a cursus a velit nisl ut lacinia. Bpede ac. Bquam eu ut a nunc hac sed mi euismod nulla a.
+```
+
 ### Python
 
 ```python
@@ -134,6 +140,10 @@ class Program
 </html>
 ```
 
+# Long paragraph
+
+Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Barcu ve a a a id a a a a morbi ut a. Bcras at a eni a a dapibus montes. Bnunc eu a ligula a ve a. Bante ut a platea at a leo id dictumst. Bdiam in ve. Bquam in ut purus et. Belit ve in a nam arcu dictum a. Bquis ut a volutpat consectetuer odio. Bquis ut. Berat ad conubia a congue sit a semper porta eu. Bnunc eu mi. Belit id a. Bante et a a rutrum ac a a per a. Bnibh eu. Bnibh in. Barcu ad. Bamet ad a. Bpede eu ut. Belit ve. Belit mi a ac a sem a. Bquis id nisl. Bodio eu a eni a nam. Bante in a a eu a a aptent. Bante eu a a a ac. Bnisl ad. Burna mi a a a eu tortor. Barcu ac. Bnisl id eu eni leo mi nisi a a a in class a erat. Bpede mi a non dis a a a a sed. Burna ut a a neque aptent a mi erat ante. Bodio eu nibh sem a sem at orci justo. Bdiam ac a imperdiet orci class a hac augue. Bante in. Berat at. Benim ac a mi per eget a. Borci id at ipsum. Belit ut a id fermentum netus et. Barcu eu a sit phasellus lectus id. Burna id at hac donec a a nibh est a. Bpede at eu at ut eros. Borci id ac eni a per proin rutrum mi a a a a laoreet. Bquam ac a. Burna et a justo volutpat magna ac. Burna eu a aenean quam eni per congue egestas arcu a a. Bduis id a a. Borci ut a id cum vel quam a vitae massa. Burna et a eni augue a cum a non a. Bante ac a a a litora ve a a. Bnisi ut a dis enim. Belit et. Bduis in. Bcras ad. Burna mi a a eget at a class nisi. Bnibh in a arcu ad a neque fames nisi phasellus. Burna et pede a a primis a. Bcras at ac lorem ve varius odio sit a dolor eget est mi egestas curae enim dui. Belit in a eros ac et nibh. Bamet ac a. Bduis id a maecenas a. Burna eu a in vel a. Bduis in a blandit tellus ad a quam a a tempus nunc in a a. Bnunc in id non a etiam. Bcras ve a a a a amet a cum a cum a netus a. Benim in. Bnibh ve id a a ad a. Bnisl at a taciti ornare a pellentesque. Bnisl id a a. Bquis mi. Beget mi id sit. Borci at mi sociis semper euismod amet a a cum eget urna. Bamet ve a cursus a ve a mauris in a hac ac a a. Bodio et a. Bamet at a a sit mi eget. Bquam eu a ve ut a platea a. Borci in a duis a ve in a quam nec. Berat ut a. Bduis et at a a a gravida aptent senectus varius. Barcu ac. Beget eu. Bnisl id a leo amet enim. Bnunc at. Bcras id nibh quis sit a. Barcu id aliquam cras a a a a. Bnisi ad quisque. Bnisi at a in nibh non a turpis. Bquam at a a tellus. Bante ut a cum per a ve a a congue. Bquis id mi primis id non. Bnibh ad a mus a. Bquam ve. Bnunc et a maecenas. Burna ac. Burna ut. Benim ut a cum metus ad a et nam non. Bnisi at. Bnunc at a a a ante a sit a cras leo a. Bnibh at diam a cursus a velit nisl ut lacinia. Bpede ac. Bquam eu ut a nunc hac sed mi euismod nulla a.
+
 ## Special characters
 
 Ää Öö Üü ß Áá Èè