☰

ChatGPT: Styles to Make Code Conversations More Readable

Updates code blocks and messages to be more readable: full width helpers and reduces padding/margins so you can quickly jump around long code convos.

Fra og med 14.07.2023. Se den nyeste version.

// ==UserScript==
// @name         ChatGPT: Styles to Make Code Conversations More Readable
// @namespace    zschuessler
// @version      1.0
// @description  Updates code blocks and messages to be more readable: full width helpers and reduces padding/margins so you can quickly jump around long code convos.
// @author       [email protected]
// @match        https://chat.openai.com/c/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chat.openai.com
// @grant        none
// @license      unlicense
// ==/UserScript==

(function () {
    let domSelectors = {
        messageContainers: '.group.w-full > div',
        messageCodeBlocks: '.group.w-full > div pre',
        messageParagraphs: '.group.w-full > div p'
    }

    create_style_node_for_css(`
    /***
    *Individual message divs:
    * - Now full width
    * - Reduces padding
    * - Forces scrollbar for extra-big code blocks
    */
    ${domSelectors.messageContainers} {
        min-width: 100%;
        padding: 20px;
        overflow: hidden;
    }

    /**
     * Message paragraphs
     * Puts a max width on paragraphs while keeping the container full width
     * This achieves a more readable paragraph width but still allows full width code blocks
     */
    ${domSelectors.messageParagraphs} {
       max-width: 750px;
       margin: 0 0 15px 0;
    }

    /**
     * Message Code Blocks
     * Scales code blocks to be 100%, but never more than 80vw.
     * This makes code blocks infinitely more readable on all viewports.
     */
     ${domSelectors.messageCodeBlocks} {
        width: 80vw;
        overflow: auto;
        max-width: 100%;
      }

    /**
     * Force scrollbars
     * Necessary for large code blocks that need to avoid line wrapping
     /
     .w-full {
       overflow: hidden;
     }
   `);
})();

// Simple helper function to create the style tag
function create_style_node_for_css(cssStr) {
    let styleTag = document.createElement('style');
    styleTag.textContent = cssStr;

    let styleTagContainer = document.getElementsByTagName('head')[0]
        || document.body
        || document.documentElement;

    styleTagContainer.appendChild(styleTag);
}