Action

Preview - Adjustable

Posted by agiletortoise, Last update about 2 months ago

Markdown preview demonstrating the use of dynamic JavaScript and CSS in the preview page to allow font size and base font to be changed while in the preview.

See the User Guide for more details on using advanced HTML preview features.

Steps

  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
        <title>[[title]]</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            @charset "utf-8";
    
            :root {
                --main-bg-color: white;
                --main-color: black;
                --alternate-bg-color: #efefef;
                --alternate-color: #222222;
                --main-border-color: #BBBBBB;
                --link-color: #627EC9;
            }
    
            @media (prefers-color-scheme: dark) {
                :root {
                    --main-bg-color: #111111;
                    --main-color: #eeeeee;
                    --alternate-bg-color: #444444;
                    --alternate-color: #cccccc;
                    --main-border-color: #AAAAAA;
                    --link-color: #627EC9;
                }
            }
    
            html {
                font-size: 100%;
                font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
                line-height: 1.4;
            }
    
            body {
                margin: 0;
                padding: 1em;
                background-color: var(--main-bg-color);
                color: var(--main-color);
            }
    
            #content {
                font-size: 1em;
            }
    
            @media (max-device-width: 480px) {}
    
            @media (min-device-width: 481px) {
                body {
                    margin: auto;
                    max-width: 600px;
                }
            }
    
            blockquote {
                font-style: italic;
                margin: 1.5em 2em;
                padding: 1em;
                background-color: var(--alternate-bg-color);
                color: var(--alternate-color);
            }
    
            a {
                color: var(--link-color);
            }
    
            pre {
                display: block;
                overflow: scroll;
                width: 100%;
                background-color: var(--alternate-bg-color);
                padding: .5em 1em;
                margin: 1em 0;
            }
    
            code {
                background-color: var(--alternate-bg-color);
                color: var(--alternate-color);
                font-family: Menlo, Courier, sans-serif;
                padding: 2px 3px;
            }
    
            table {
                margin: 1.5em 0;
                border: 1px solid var(--main-border-color);
                border-collapse: collapse;
            }
    
            th {
                padding: .25em .5em;
                background: var(--alternate-bg-color);
                border: 1px solid var(--main-border-color);
            }
    
            td {
                padding: .25em .5em;
                border: 1px solid var(--main-border-color);
            }
    
            img {
                max-width: 90%;
            }
    
            #toolbar {
                position: fixed;
                bottom: 4px;
                right: 4px;
                border-radius: 4px;
                background-color: var(--alternate-bg-color);
                padding: .25em .5em;
                font-size: 1.25em;
                font-weight: 300;
                opacity: 0.9;
            }
            #toolbar a {
                text-decoration: none;
                padding: .1em .5em;
                background-color: var(--main-bg-color);
                border-radius: 4px;
            }
        </style>
        <script>
            function increaseFont() {
                let txt = document.getElementById('content');
                let style = txt.style.fontSize;
                let currentSize = parseFloat(style);
                txt.style.fontSize = (currentSize + 0.2) + 'em';
            }
            function decreaseFont() {
                let txt = document.getElementById('content');
                let style = txt.style.fontSize;
                let currentSize = parseFloat(style);
                txt.style.fontSize = (currentSize - 0.2) + 'em';
            }
            function changeFont(sel) {
                let txt = document.getElementById('content');
                if (sel == 0) {
                    txt.style.fontFamily = '"Helvetica Neue", Helvetica'
                }   
                else if (sel == 1) {
                    txt.style.fontFamily = '"Times New Roman", "Times Roman"'
                }   
                else if (sel == 2) {
                    txt.style.fontFamily = "Verdana"
                }  
                else if (sel == 3) {
                    txt.style.fontFamily = "Palantino"
                }    
            }
        </script>
    </head>
    
    <body>
        <div id="toolbar">
            <select id="basefont" onchange="changeFont(this.selectedIndex);">
                <option>Helvetica</option>
                <option>Times</option>
                <option>Verdana</option>
                <option>Palantino</option>
            </select>&nbsp;
            <a href="#" onclick="decreaseFont(); return false;">-</a>&nbsp;
            <a href="#" onclick="increaseFont(); return false;">+</a>
        </div>
        <div id="content" style="font-size: 1em;font-family:-apple-system;">
            %%[[draft]]%%
        </div>
    </body>
    
    </html>

Options

  • After Success Nothing
    Notification Error
    Log Level Error
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.