Action

nomnoml

Posted by Zach Williams, Last update about 1 month ago

Display nomnoml diagrams in a HTML preview.

Steps

  • script

    draft.setTemplateTag(
      "nomnoml_scale", 2.6
    )
  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
      <title>[[title]]</title>
      <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: #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>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/nomnoml/1.1.1/nomnoml.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    %%[[draft]]%%
    
    
    <script>
    function decodeHtmlCharCodes(str) {
      return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
        return String.fromCharCode(charCode);
      });
    }
    
    let code = $("code.nomnoml");
    code.each(function(index, element) {
        let source = decodeHtmlCharCodes($(element).text());
        let canvas = document.createElement("canvas");
        nomnoml.draw(canvas, source, [[nomnoml_scale]]);
    
        let data = canvas.toDataURL();
        let image = new Image();
        image.src = data;
        $(element).parent().after(image);
    });
    </script>
    
    </html>
    

Options

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