Syntax Highlighter Color Determinator

🎨 Color Determinator Form

Assign a hue value to manage the theme tokens of each syntax class. Initial inputs are randomized across the 12-hue spectrum.

Defines the styling rules applied directly to Document Type Declarations (e.g., <!doctype html>).
Controls structural tag indicators inside the source view code blocks (e.g., <html>, <head>, <body>).
Target parameters and structural settings defined inside elements (e.g., lang, charset, class).
Determines literal text strings typically bound between declaration quotes (e.g., "id", "UTF-8").
Formats developer notes and hidden structural reminders skipped during processing cycles (e.g., <!-- Mermaid.js Library -->).
Applies color presets onto plain string content blocks nested deeply within non-code targets.
Highlights operator characters, structural notation parameters, brackets, and statement links (e.g., { }, :, ;).
Flags numeric markers, programmatic counts, sizing configurations, or absolute structural values (e.g., 20px, 1.6).
Manages styles for explicitly named style attributes inside style sheets (e.g., margin, padding, background).
Styles targets defined inside code structure templates to select rendering layers (e.g., body, *, .intro-box). 
<!doctype html>
<html lang="id">
        <head>
                <meta charset="UTF-8" />
                <meta viewport="width=device-width, initial-scale=1.0" />
                <title>Comment Logic Flow Diagram</title>

                <!-- Mermaid.js Library -->
                <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

                <style>
                        /* ========================================
           GLOBAL STYLES
           ======================================== */
                        * {
                                box-sizing: border-box;
                        }

                        body {
                                background: #f2f6fc;
                                margin: 20px;
                                font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                                line-height: 1.6;
                        }

                        /* ========================================
           HEADER SECTION
           ======================================== */
                        .page-header {
                                margin: 40px 0 20px;
                        }

                        .page-header h1 {
                                text-align: center;
                                color: #113355;
                        }

                        .intro-box {
                                background: rgb(228, 240, 250);
                                border-radius: 40px;
                                font-size: 1.1rem;
                                margin-top: 30px;
                                padding: 14px 24px;
                        }

                        .intro-box h2 {
                                background: rgb(236, 245, 253);
                                border-radius: 30px;
                                margin-top: 6px;
                                padding: 8px;
                                text-align: center;
                                color: #113355;
                        }

                        .intro-box .description {
                                font-weight: 700;
                        }

                        /* ========================================
           BADGE STYLES
           ======================================== */
                        .badge-title {
                                background: #082b40;
                                color: white;
                                padding: 8px 28px;
                                border-radius: 60px;
                                font-size: 1.3rem;
                                font-weight: 600;
                                display: inline-block;
                                margin-bottom: 18px;
                                letter-spacing: -0.2px;
                        }

                        .badge-center {
                                text-align: center;
                                margin-bottom: 10px;
                        }

                        /* ========================================
           DIAGRAM CONTAINER
           ======================================== */
                        .diagram-mega {
                                background: #fafbfc;
                                border-radius: 24px;
                                padding: 20px;
                                border: 2px solid #a3c0d9;
                                width: 100%;
                                max-width: 1200px;
                                overflow-x: auto;
                                overflow-y: visible;
                                margin: 0 auto 20px;
                                box-shadow: 0 10px 25px rgba(0, 30, 60, 0.15);
                        }

                        .mermaid-inner {
                                min-width: 800px;
                                width: fit-content;
                                background: white;
                                padding: 25px 20px;
                                border-radius: 28px;
                                box-shadow: 0 8px 20px rgba(0, 20, 40, 0.1);
                                margin: 0;
                        }

                        .mermaid-inner svg {
                                max-height: none !important;
                                height: auto !important;
                                display: block;
                        }

                        .mermaid {
                                text-align: center;
                        }

                        /* ========================================
           FOOTER NOTE
           ======================================== */
                        .foot-note {
                                text-align: center;
                                background: #ecf5fd;
                                padding: 10px 18px;
                                border-radius: 40px;
                                margin: 16px auto;
                                color: #103c5c;
                                font-size: 0.95rem;
                                max-width: 800px;
                                border: 1px solid #b8d2e0;
                        }

                        /* ========================================
           DIVIDER
           ======================================== */
                        .section-divider {
                                margin: 40px 0;
                                border: none;
                                border-top: 2px solid #a3c0d9;
                        }

                        /* ========================================
           NOSCRIPT WARNING
           ======================================== */
                        .no-js-warning {
                                background: #ffe0b0;
                                padding: 20px;
                                border-radius: 30px;
                                text-align: center;
                                margin: 20px auto;
                                max-width: 600px;
                        }
                </style>
        </head>

        <body>
                <!-- ========================================
         HEADER SECTION
         ======================================== -->
                <header class="page-header">
                        <h1>📊 DIAGRAM of COMMENT LOGIC FLOW</h1>

                        <div class="intro-box">
                                <h2>✨ render='false' vs 'true' | private/shared + GitHub analogy</h2>
                                <p>
                                        <span class="description">📌</span>
                                        menggambarkan alur keputusan <code>render</code> secara visual.
                                </p>
                        </div>
                </header>

                <!-- ========================================
         HORIZONTAL DIAGRAM (TOP-DOWN FLOWCHART)
         ======================================== -->
                <section>
                        <div class="badge-center">
                                <span class="badge-title">📊 HORIZONTAL</span>
                        </div>

                        <div class="diagram-mega">
                                <div class="mermaid-inner">
                                        <pre class="mermaid">
                                        
flowchart TD

    A["<b>&lt;b:comment&gt; tag</b>"] --> B{"Attribute render?"}



    B -- "render='false' (default)" --> C["🔒 <b>Private / Internal</b>"]

    B -- "render='true'" --> D["🌐 <b>Shared / External</b>"]



    C --> E["Stored only in Blogger editor"]

    C --> F["❌ Not in page source"]

    C --> G["❌ Not visible to anyone outside"]

    C --> H["✏️ Use: sensitive warnings, admin notes"]



    D --> I["Exported as normal HTML comment"]

    D --> J["✅ Visible in page source"]

    D --> K["✅ Visible to collaborators, crawlers"]

    D --> L["✏️ Use: debugging markers, team hints"]



    I --> M["<code>&lt;!-- comment shows here --&gt;</code>"]



    subgraph GITHUB_ANALOGY["GitHub / peer-to-peer analogy"]

        N["Private draft = render='false'"]

        O["Committed comment = render='true'"]

    end



    C -.-> N

    D -.-> O



    style A fill:#d5e8f2,stroke:#1f4b77,stroke-width:2px

    style B fill:#ffe5b4,stroke:#b45f1b,stroke-width:2px

    style C fill:#ffd9d9,stroke:#aa3e3e

    style D fill:#d0e5ff,stroke:#175a8f

    style GITHUB_ANALOGY fill:#f5f0db,stroke:#9e8b5a,stroke-dasharray:4 4

                                        </pre>
                                </div>
                        </div>

                        <div class="foot-note">
                                ✦ Horizontal flow: <strong>render='false'</strong> (cabang atas) ·
                                <strong>render='true'</strong> (cabang bawah)<br />
                                ⟷ Lebar discroll horizontal · tinggi penuh tanpa scroll vertikal
                        </div>
                </section>

                <hr class="section-divider" />

                <!-- ========================================
         VERTICAL DIAGRAM (LEFT-TO-RIGHT GRAPH)
         ======================================== -->
                <section>
                        <div class="badge-center">
                                <span class="badge-title">📊 VERTICAL</span>
                        </div>

                        <div class="diagram-mega">
                                <div class="mermaid-inner">
                                        <div class="mermaid">
graph LR

    A["<b:comment> tag"] --> B{"Attribute render?"}



    B -- "render='false'" --> C["🔒 Private / Internal"]

    B -- "render='true'" --> D["🌐 Shared / External"]



    subgraph FALSE_DETAILS["render='false' details"]

        direction TB

        C --> E["Stored only in Blogger editor"]

        C --> F["❌ Not in page source"]

        C --> G["❌ Not visible to anyone outside"]

        C --> H["✏️ Use: sensitive warnings, admin notes"]

    end



    subgraph TRUE_DETAILS["render='true' details"]

        direction TB

        D --> I["Exported as normal HTML comment"]

        D --> J["✅ Visible in page source"]

        D --> K["✅ Visible to collaborators, crawlers"]

        D --> L["✏️ Use: debugging markers, team hints"]

    end



    I --> M["<!-- comment shows here -->"]



    subgraph GITHUB_ANALOGY["GitHub / peer-to-peer analogy"]

        direction TB

        N["Private draft = render='false'"]

        O["Committed comment = render='true'"]

    end



    C -.-> N

    D -.-> O



    style A fill:#d5e8f2,stroke:#1f4b77,stroke-width:2px

    style B fill:#ffe5b4,stroke:#b45f1b,stroke-width:2px

    style C fill:#ffd9d9,stroke:#aa3e3e,stroke-width:2px

    style D fill:#d0e5ff,stroke:#175a8f,stroke-width:2px

    style FALSE_DETAILS fill:#ffe1e1,stroke:#b34747,stroke-dasharray:3 2

    style TRUE_DETAILS fill:#ddecff,stroke:#256ba0,stroke-dasharray:3 2

    style GITHUB_ANALOGY fill:#f5f0db,stroke:#9e8b5a,stroke-dasharray:4 4

                                        </div>
                                </div>
                        </div>

                        <div class="foot-note">
                                ✦ Left-to-right orientation: <strong>main di kolom paling kiri</strong> · detail di
                                kanan · mermaid v10<br />
                                ⟷ lebar discroll horizontal · aliran kiri ke kanan (main → false/true → detail lebih
                                kanan)
                        </div>
                </section>

                <!-- ========================================
         NOSCRIPT FALLBACK
         ======================================== -->
                <noscript>
                        <div class="no-js-warning">⚠️ JavaScript diperlukan untuk menampilkan diagram Mermaid.</div>
                </noscript>

                <!-- ========================================
         MERMAID INITIALIZATION
         ======================================== -->
                <script>
                        mermaid.initialize({
                                startOnLoad: true,
                                theme: "base",
                                themeVariables: {
                                        background: "#ffffff",
                                        primaryColor: "#bbdefb",
                                        primaryTextColor: "#113355",
                                        primaryBorderColor: "#2a5f8a",
                                        lineColor: "#2b5f8a",
                                        secondaryColor: "#fce4d6",
                                        tertiaryColor: "#f0f4fa",
                                },
                                flowchart: {
                                        useMaxWidth: false,
                                        htmlLabels: true,
                                        curve: "basis",
                                        padding: 20px,
                                },
                                securityLevel: "loose",
                                deterministicIds: true,
                        });
                </script>
        </body>
</html>

Comments

Post a Comment

Popular posts from this blog

[MAIN PROGRAM] UNDONE HOUSEHOLD WORKs WEB-PROGRAM v2/MAIN

Waiting to test Firebase… Write Test Data Read Test Data Delete Tester Data Category Manager (CRUD) ADD NEW Category: Add Category Existing Categories Category Actions Create New Task Task Title: Category: ADD NEW: Create Task Task List Filter by Category: (All Categories) Task ID Title Category Overall Status Manage Phase Manager Category for this Task: ADD NEW: Save Category Phase Number: Phase Status: Phase Description: Add Phase Existing Phases: Phase Status Description Upload Spreadsheet → Import to Firebase Expected columns in sheet: Title , Phase Number , Phase Status , Description , and optional Category . Value na or not available ...
Read more

PENDING ITEMs [REVISION] v0

🔗 My Pending and Delayed POSTs SUMMARY Sort by Date Sort by Auto Title Sort by My Title Ascending Descending Insert URL: Your Own Title (Optional): ➕ ADD ENTRY 💾 SAVE EDIT DATE AUTO TITLE MY TITLE URL ACTIONS 📝 TO DO LIST SUMMARY  Sort by Date Sort by Header Sort by Detail Ascending Descending Header (Title): Detail: ➕ ADD ENTRY ...
Read more