HtmlEditor — Style demo source

This is the demo page used to test HtmlEditor's Style dropdown. The dropdown is built from the page's own CSS: the <style> block below and the linked local stylesheet sample-extra.css. Rules the parser must skip (pseudo-classes, combinators, #id, @ rules) are included on purpose. Save both files in the same folder and open sample-styled.html in HtmlEditor to try it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Style Test</title>
        <link rel="stylesheet" href="sample-extra.css">
        <link rel="stylesheet" href="https://example.com/remote-theme.css">
        <style>
            /* ---- Element styles (offered: h1, h2, p, blockquote, pre; body is not a block style) ---- */
            body { font-family: "Segoe UI", Arial, sans-serif; margin: 2em; color: #222; line-height: 1.5; }
            h1 { color: #1f4e79; border-bottom: 2px solid #1f4e79; padding-bottom: 0.2em; }
            h2 { color: #2e75b6; }
            p { margin: 0.6em 0; }
            blockquote { border-left: 4px solid #999; margin-left: 0; padding-left: 1em; color: #555; font-style: italic; }
            pre { background: #f4f4f4; border: 1px solid #ddd; padding: 0.75em; font-family: Consolas, monospace; }

            /* ---- Class styles (offered) ---- */
            .note { background: #e8f4fd; border-left: 4px solid #2e75b6; padding: 0.5em 0.75em; }
            .warning { background: #fff4e5; border-left: 4px solid #e07b00; padding: 0.5em 0.75em; }
            .highlight { background: #fff59d; }
            p.lead { font-size: 1.25em; color: #444; }
            .code-inline { font-family: Consolas, monospace; background: #eee; padding: 0 0.25em; }

            /* ---- Rules the parser must SKIP ---- */
            a:hover { color: #c00; }
            div > p { margin-left: 1em; }
            #main { max-width: 60em; }
            ul li { list-style: square; }
            .note::before { content: "{ braces in a string must not break parsing }"; }
            @media (max-width: 600px) {
                .note { padding: 0.25em; }
                .mobile-only { display: block; }
            }
            @font-face { font-family: "Demo Font"; src: local("Arial"); }
        </style>
    </head>
    <body>
        <div id="main">
            <h1>Style Test</h1>
            <p>This is the lead paragraph. Select the whole paragraph and apply p.lead to make it larger.</p>
            <p>This paragraph has a phrase to highlight in the middle of the sentence. Select just that phrase and apply .highlight to wrap it in a span.</p>
            <h2>Notes and warnings</h2>
            <p>Put the cursor anywhere in this paragraph, select all of its text, and apply .note to turn it into a note box.</p>
            <p>Apply .warning to this paragraph, then use (clear style) to remove it again.</p>
            <p>Inline code such as Get-ChildItem can be marked with .code-inline.</p>
            <h2>Quotes and code</h2>
            <blockquote>A blockquote styled by the element rule in the style block.</blockquote>
            <pre>Get-Process |
                Sort-Object CPU -Descending |
                Select-Object -First 5
            </pre>
            <p>Change this line into a heading by placing the cursor in it and choosing h2.</p>
            <p>This line can become a callout (from sample-extra.css) or an h3.</p>
        </div>
    </body>
</html>

/* Linked from sample-styled.html to exercise <link rel="stylesheet"> parsing. */
h3 { color: #6a1b9a; }
.callout { border: 1px dashed #6a1b9a; padding: 0.5em 0.75em; background: #f7f0fb; }

← Back to HtmlEditor docs · Script source