[How to] Make Code Blocks in Katalon Forum Posts Easier to Read

[Russ_Thomas]

Something that really bugs me about discourse (the software this forum uses)…

   Large code blocks are difficult to read

When you consider they are likely to contain the most relevant information in the post, that’s extraordinarily annoying.

This post shows you a way to lift the code blocks out of the post and place them in a new window.

You’ll still need to scroll if the post is large, but it’s much better than it looks in the forum post, IMO.

Process

1. Bring up the DevTools, open the console.
2. Paste the following code into the console:

dump = function(post) { 
  var win = window.open("");

  var style = win.document.createElement("style");
  style.innerText = "body {background-color:#444;color:#ccc;}";
  style.innerText += "#dump {font:normal 17px sans-serif;max-height:98vh;max-width:99vw;overflow:auto;scrollbar-color:#ace #444;scrollbar-width:thin;}}";
  style.innerText += "#dump div {font:normal 17px sans serif;background-color:#555;margin:0 0 2em 2em;}";
  style.innerText += "pre {font:normal 16px monospace;padding:10px 10px;white-space:pre;}";
  win.document.body.appendChild(style);

  var div = win.document.createElement("div");
  div.id = "dump";
  var codes = "";
  var allcodes = document.querySelectorAll(post + " pre code");
  for(var i = 0; i < allcodes.length; i++) {
    codes += "Code block:<br><div><pre><code>" + allcodes[i].innerHTML + "</code></pre></div>";
  }
  div.innerHTML = codes;
  win.document.body.appendChild(div);
}
dump("#post_1");

3. You will need to replace the id in dump("#post_1") with the id of the post you want to inspect.

4. Then hit return and a new window will popup with ALL the code blocks laid out for your viewing pleasure

And because @bionel is a complete ass and pointed out I’d made a poor choice for <pre> whitespace handling, here’s the ALL NEW FIXED version dogfooding the code above:

Competition! Big Prizes!!!

It would be nice to automate this little tool. A Tampermonkey script could do this easily and remove the need to use the console.

What are you waiting for? Go!

[devalex88]

Thank you, @Russ_Thomas - it’s very helpful.

[bionel]

@Russ_Thomas

in a new window

For me was in a new tab. I know, you firefox, me chrome

Also, your solution breaks code indenting. Kindly improve

[Russ_Thomas]

@bionel

Also, your solution breaks code indenting. Kindly improve

Ha! Good catch!

[bionel]

@Russ_Thomas

[kazurayam]

@Russ_Thomas

@Russ_Thomas

A Tampermonkey script could do this easily and remove the need to use the console.

I tried it. I copy&pasted your code above into TamperMonkey, then I got an error. Your code had a Global variable named dump, which TamplerMokey disliked.

I changed the code a bit to make an operational UserScript in TamperMonkey. The following is what I have got. It now works fine.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://forum.katalon.com/*
// @grant        none
// ==/UserScript==
(function(post) {
    'use strict';
    var win = window.open("");
    var style = win.document.createElement("style");
    style.innerText = "body {background-color:#444;color:#ccc;}";
    style.innerText += "#dump {font:normal 17px sans-serif;max-height:98vh;max-width:99vw;overflow:auto;scrollbar-color:#ace #444;scrollbar-width:thin;}}";
    style.innerText += "#dump div {font:normal 17px sans serif;background-color:#555;margin:0 0 2em 2em;}";
    style.innerText += "pre {font:normal 16px monospace;padding:10px 10px;white-space:pre;}";
    win.document.body.appendChild(style);
    var div = win.document.createElement("div");
    div.id = "dump";
    var codes = "";
    var allcodes = document.querySelectorAll(post + " pre code");
    for(var i = 0; i < allcodes.length; i++) {
        codes += "Code block:<br><div><pre><code>" + allcodes[i].innerHTML + "</code></pre></div>";
    }
    div.innerHTML = codes;
    win.document.body.appendChild(div);
})("#topic");

My changes include:

1. I got rid of using the Global variable dump.
2. I wrote // @match https://forum.katalon.com/*
3. I changed ("#post_1") to ("#topic"). This is just my preference to widen the range of posts to render in the new browser tab.

[Russ_Thomas]

@kazurayam

Your code had a Global variable named dump

That’s right. My code is not written for Tampermonkey. And the “problem” is not that Tampermonkey doesn’t like it, you’re using the “use strict” string (which you could but probably should not remove).

Anyway, here’s your big prize, as promised:

[Russ_Thomas]

The idea, of course, is that @devalex88 will take the hint and give us a button on each code block that launches the code block in a separate window/tab without the need for console-pasting or even Tampermonkey.

I might give him an even BIGGER prize if he does that

[kazurayam]

Many people even don’t know CODE BLOCK formatting.

Posts with a long log pasted without CODE BLOCK formatting is annoying as well. If I want to these posts in the alternative style, I would write the UserScript as:

var allcodes = document.querySelectorAll(post + " p");

It would work, but not ideal. Well, …