Drafts Directory: Dark-Light Preview II

Action

Posted by dmetzcher, Last update over 6 years ago

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>

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.

After Success	Nothing
Notification	Error
Log Level	Error