Drafts Action Directory

Dark-Light Preview II

Posted by dmetzcher, Last updated: 2018-07-04 11:05:40 UTC

Dark-Light preview that displays strikethrough (~~) properly.
Critic marks (strikethrough) rendering by sylumer.
Minor edits by dmetzcher add theme-sensitive CSS for preview (same as original “Dark-Light Preview” by agiletortoise).

Install

Steps

  • script

    // create theme sensitive css for preview
    
    if (app.themeMode == 'dark') {
    	var css = "body { background: #222; color: #ddd; }";
    	draft.setTemplateTag("bodystyle", css);
    }
    else {
    	var css = "body { background: #fff; color: #444; }";
    	draft.setTemplateTag("bodystyle", css);
    }
  • script

    // Add support for strikethrough (~~).
    // Code by sylumer
    
    var toRender = draft.content.replace(/\~\~(.*)\~\~/gm, '\<del\>$1\<\/del\>');
    var mmd = MultiMarkdown.create();
    draft.setTemplateTag("PreviewThis",mmd.render(toRender));
  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    <head>
    <title>Preview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    @charset "utf-8";
    
    html { 
    	font-size:100%;
    	font-family: "Helvetica Neue", "Helvetica", sans-serif;
    }
    body {
    	margin:0;
    	padding:1em;
    }
    [[bodystyle]]
    @media (max-device-width: 480px) { 
    
    } 
    @media (min-device-width: 481px) { 
    	body {
    		margin:auto;
    		max-width:600px;
    	} 
    }
    
    blockquote {
    	font-style: italic;
    }
    
    code, pre {
        border-radius: 3px;
        padding: .5em;
       color: inherit;
    }
    
    table {
      margin: 1em 0;
      border: 1px solid #aaa;
      border-collapse: collapse;
    }
    
    th {
      padding:.25em .5em;
      border: 1px solid #ccc;  
    }
    
    td {
      padding:.25em .5em;
      border: 1px solid #ccc;
    }
    
    </style>
    </head>
    <body>
      %%[[PreviewThis]]%%
    </body>
    </html>
    

Comments

Actions available in the Action Directory are uploaded by community members. Use appropriate caution reviewing downloaded actions before use.