Preview (with MathJax Support)

Posted by agiletortoise, Last update about 1 month ago

Markdown preview which builds some css styles based on current dark or light mode. The template of this included MathJax to render equations. MathJax support can be added to any HTML Preview by including the below script tags in the of the HTML document generated by the HTML Preview.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> 
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Steps

  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
      <title>[[title]]</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> 
      <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    
      <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: #222222;
            --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.4em;
        }
    
        body {
          margin: 0;
          padding: 1em;
          background-color: var(--main-bg-color);
          color: var(--main-color);
        }
    
        @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%;
        }
      </style>
    </head>
    
    <body>
      %%[[draft]]%%
    </body>
    
    </html>
    

Options

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