☰

LeetCode Horizontal Scroll for Multi Language Code

Add a horizontal scrollbar to the div container of multi programming language Code

As of 2025-03-25. See the latest version.

// ==UserScript==
// @name         LeetCode Horizontal Scroll for Multi Language Code
// @name:ar      LeetCode شريط تمرير أفقي لأكواد متعددة اللغات
// @name:bg      LeetCode Хоризонтален скрол за код на мн. езици
// @name:cs      LeetCode Horizontální posuvník pro kód více jazyků
// @name:da      LeetCode Vandret rullebjælke til fler-sprog kode
// @name:de      LeetCode Horizontale Leiste für Mehrsprach-Code
// @name:el      LeetCode Οριζόντια κύλιση για κώδικα πολλών γλωσσών
// @name:en      LeetCode Horizontal Scroll for Multi Language Code
// @name:eo      LeetCode Horizontala Rulŝtango por Plurlingva Kodo
// @name:es      LeetCode Barra horizontal para código multilenguaje
// @name:fi      LeetCode Vaakavvieritys monikieliselle koodille
// @name:fr      LeetCode Défilement horizontal pour code multilangue
// @name:fr-CA   LeetCode Défilement horizontal pour code multi
// @name:he      LeetCode גלילה אופקית לקוד רב-שפות
// @name:hr      LeetCode Vodoravni klizač za višejezični kod
// @name:hu      LeetCode Vízszintes görgető többnyelvű kódhoz
// @name:id      LeetCode Gulir Horizontal untuk Kode Multibahasa
// @name:it      LeetCode Barra orizzontale per codice multilingue
// @name:ja      LeetCode マルチ言語コード用水平スクロール
// @name:ka      LeetCode ჰორიზონტალური გადახვევა მრავალენოვანი
// @name:ko      LeetCode 다중 언어 코드용 수평 스크롤
// @name:nb      LeetCode Vannrett rullefelt for fler-språk kode
// @name:nl      LeetCode Horizontale balk voor meertalige code
// @name:pl      LeetCode Poziomy pasek dla kodu wielojęzycznego
// @name:pt-BR   LeetCode Rolagem horizontal para código multi
// @name:ro      LeetCode Bară orizontală pentru cod multilingv
// @name:ru      LeetCode Горизонтальная прокрутка для кода мн. языков
// @name:sk      LeetCode Horizontálny posuvník pre viacjazyčný kód
// @name:sr      LeetCode Хоризонтални клизач за вишејезични код
// @name:sv      LeetCode Horisontell rullning för flerspråkig kod
// @name:th      LeetCode แถบเลื่อนแนวนอนสำหรับโค้ดหลายภาษา
// @name:tr      LeetCode Yatay Kaydırma Çok Dilli Kod için
// @name:ug      LeetCode يانتۇ سۈرگۈچ كۆپ تىللىق كود ئۈچۈن
// @name:uk      LeetCode Горизонтальна прокрутка для коду мн. мов
// @name:vi      LeetCode Thanh cuộn ngang cho mã đa ngôn ngữ
// @name:zh      LeetCode 多语言代码水平滚动条
// @name:zh-CN   LeetCode 多语言代码水平滚动条
// @name:zh-HK   LeetCode 多語言程式碼水平滾動條
// @name:zh-SG   LeetCode 多语言代码水平滚动条
// @name:zh-TW   LeetCode 多語言程式碼區水平滾動條

// @description  Add a horizontal scrollbar to the div container of multi programming language Code
// @description:ar إضافة شريط تمرير أفقي إلى حاوية div لأكواد البرمجة متعددة اللغات
// @description:bg Добавяне на хоризонтален скролбар към контейнера div с код на множество програмни езици
// @description:cs Přidat horizontální posuvník do kontejneru div s kódem ve více programovacích jazycích
// @description:da Tilføj en vandret rullebjælke til div-beholderen med kode i flere programmeringssprog
// @description:de Fügen Sie eine horizontale Bildlaufleiste zum div-Container mit Code in mehreren Programmiersprachen hinzu
// @description:el Προσθήκη οριζόντιας γραμμής κύλισης στον περιέκτη div κώδικα πολλαπλών γλωσσών προγραμματισμού
// @description:en Add a horizontal scrollbar to the div container of multi programming language Code
// @description:eo Aldonu horizontala rulŝtango al la div-ujo de plurlingva programa kodo
// @description:es Agregar una barra de desplazamiento horizontal al contenedor div de código en múltiples lenguajes de programación
// @description:fi Lisää vaakasuora vierityspalkki monikielisen ohjelmointikoodin div-säiliöön
// @description:fr Ajouter une barre de défilement horizontale au conteneur div de code en plusieurs langages de programmation
// @description:fr-CA Ajouter une barre de défilement horizontale au conteneur div de code en plusieurs langages de programmation
// @description:he הוסף גלילה אופקית למיכל ה-div של קוד בשפות תכנות מרובות
// @description:hr Dodaj vodoravni klizač u spremnik div koda u više programskih jezika
// @description:hu Adjon vízszintes görgetősávot a több programozási nyelvű kód div tárolójához
// @description:id Tambahkan bilah gulir horizontal ke kontainer div kode bahasa pemrograman ganda
// @description:it Aggiungi una barra di scorrimento orizzontale al contenitore div di codice in più linguaggi di programmazione
// @description:ja マルチプログラミング言語コードのdivコンテナに水平スクロールバーを追加する
// @description:ka დაამატეთ ჰორიზონტალური გადახვევის ზოლი მრავალი პროგრამირების ენის კოდის div კონტეინერს
// @description:ko 다중 프로그래밍 언어 코드의 div 컨테이너에 수평 스크롤바를 추가하세요
// @description:nb Legg til et vannrett rullefelt i div-beholderen med kode i flere programmeringsspråk
// @description:nl Voeg een horizontale schuifbalk toe aan de div-container met code in meerdere programmeertalen
// @description:pl Dodaj poziomy pasek przewijania do kontenera div z kodem w wielu językach programowania
// @description:pt-BR Adicione uma barra de rolagem horizontal ao contêiner div de código em várias linguagens de programação
// @description:ro Adăugați o bară de derulare orizontală la containerul div de cod în mai multe limbaje de programare
// @description:ru Добавить горизонтальную прокрутку к контейнеру div с кодом на нескольких языках программирования
// @description:sk Pridajte horizontálny posuvník do kontajnera div s kódom vo viacerých programovacích jazykoch
// @description:sr Додај хоризонтални клизач у контејнер div кода у више програмских језика
// @description:sv Lägg till en horisontell rullningslist i div-behållaren med kod för flera programmeringsspråk
// @description:th เพิ่มแถบเลื่อนแนวนอนให้กับคอนเทนเนอร์ div ของโค้ดหลายภาษาการเขียนโปรแกรม
// @description:tr Çoklu programlama dili kodunun div konteynerine yatay kaydırma çubuğu ekle
// @description:ug كۆپ تىللىق پروگرامما كودىنىڭ div قاچىسىغا يانتۇ سۈرگۈچ قوشۇڭ
// @description:uk Додайте горизонтальну прокрутку до контейнера div з кодом на кількох мовах програмування
// @description:vi Thêm thanh cuộn ngang vào vùng chứa div của mã code đa ngôn ngữ lập trình
// @description:zh 为多编程语言代码的div容器添加水平滚动条
// @description:zh-CN 为多编程语言代码的div容器添加水平滚动条
// @description:zh-HK 為多編程語言程式碼嘅div容器添加水平滾動條
// @description:zh-SG 为多编程语言代码的div容器添加水平滚动条
// @description:zh-tw 在多程式設計語言Code的div容器中添加一個水平滾動條
// @namespace    http://tampermonkey.net/
// @version      0.2.3.1
// @author       aspen138
// @match        https://leetcode.cn/*
// @match        https://leetcode.com/*
// @icon         https://assets.leetcode.cn/aliyun-lc-upload/uploaded_files/2021/03/73c9f099-abbe-4d94-853f-f8abffd459cd/leetcode.png?x-oss-process=image%2Fformat%2Cwebp
// @grant        none
// @license      MIT
// ==/UserScript==




(function() {
    'use strict';

    // Add your JavaScript code here
    var css = `
        .flex.select-none.bg-layer-2:not(.dark) {
            overflow-x: auto; /* Trigger horizontal scrolling */
            display: flex; /* Ensure the items are in a flex row */
            white-space: nowrap; /* Prevent wrapping of items */
        }
        .flex.select-none.bg-layer-2:not(.dark) > div {
            flex: 0 0 auto; /* Prevent flex items from shrinking */
            display: inline-block; /* Treat each div as an inline block */
        }
        /* Styles for dark mode */
        .flex.select-none.bg-layer-2.dark.bg-dark-layer-2 {
            overflow-x: auto; /* Trigger horizontal scrolling for dark mode */
            display: flex; /* Ensure the items are in a flex row for dark mode */
            white-space: nowrap; /* Prevent wrapping of items for dark mode */
        }
        .flex.select-none.bg-layer-2.dark.bg-dark-layer-2 > div {
            flex: 0 0 auto; /* Prevent flex items from shrinking in dark mode */
            display: inline-block; /* Treat each div as an inline block in dark mode */
        }
    `;

    // Create a style element
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
})();