Action

Preview with Syntax Highlighting

Last update almost 5 years ago - Unlisted

Steps

  • 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;
    }
    @media (max-device-width: 480px) { 
    
    } 
    @media (min-device-width: 481px) { 
    	body {
    		margin:auto;
    		max-width:600px;
    	} 
    }
    
    blockquote {
    	font-style: italic;
    }
    
    code {
        border-radius: 3px;
        background-color: #F8F8F8;
        color: inherit;
    }
    
    table {
      margin: 1em 0;
      border: 1px solid #aaa;
      border-collapse: collapse;
    }
    
    th {
      padding:.25em .5em;
      background: #efefef;
      border: 1px solid #ccc;  
    }
    
    td {
      padding:.25em .5em;
      border: 1px solid #ccc;
    }
    
    img {
        max-width: 90%;
    }
    
    </style>
    
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    
    
    </head>
    <body>
      %%[[draft]]%%
    </body>
    </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.