@phoenix-plugin-registry/brackets-markdown-preview
Version:
Markdown live preview incl. detached window, code syntax highlighting, output themes, adaptive preview width, graphical checkboxes, activation on start...
213 lines (198 loc) • 12.2 kB
HTML
<!--htmlhint spec-char-escape: false-->
<html>
<head>
<link rel="stylesheet" href ="../styles/extension.css">
<link rel="stylesheet" href ="brackets.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<title>Panel Designer</title>
</head>
<body style="margin:20px;" class="platform-win" id="panel-design">
<script>
function changeTheme(cb){
let panelDesign = document.getElementById("panel-design");
if (cb.checked){
panelDesign.classList.add("dark");
} else {
panelDesign.classList.remove("dark");
}
}
</script>
<h1>Brackets Panel Designer</h1>
<h2>Design Configurator</h2>
<div id="panel-designer-configurator" style="border:1px solid black; margin-bottom: 20px; padding:30px;">
<div>
<p>Options for the panel design preview:</p>
<form id="config">
<input type="checkbox" id="theme" onchange="changeTheme(this)" /><label for="theme" style="display: inline-block;">Dark theme?</label>
</form>
</div>
</div>
<h2>Panel Preview</h2>
<div style="border:1px solid black; max-height: 500px; height: 450px" class="modal-body">
<!--
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++ START OF THE PANEL HTML CODE +++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-->
<div id="bmdps-panel" class="modal-body no-padding">
<div class="modal-header">
<ul class="nav nav-tabs no-focus" data-tabs="tabs" role="tablist">
<li class="active"><a href="#preview-format" role="tab" data-toggle="tab">Preview</a></li>
<li><a href="#code-highlighting" role="tab" data-toggle="tab">Highlighting</a></li>
<li><a href="#extension-behavior" role="tab" data-toggle="tab">Ext. Behavior</a></li>
</ul>
</div>
<div class="modal-body tab-content no-padding">
<div id="preview-format" class="tab-pane active">
<div>
<span class="bmdps-label">Markdown Format</span>
<select id="markdown-preview-format">
<option>Standard Markdown</option>
<option>GitHub-Flavored (GFM)</option>
</select>
</div>
<div>
<span class="bmdps-label">Preview Theme</span>
<select id="markdown-preview-theme">
<option value="clean">Clean</option>
<option value="dark">Dark</option>
<option value="github">Github</option>
<option value="markdown5">Markdown 5</option>
<option value="markdown7">Markdown 7</option>
<option value="screen">Screen</option>
<option value="serif">Serif</option>
</select>
</div>
<div>
<span class="bmdps-label">Backgroud Color</span>
<input type="text" id="markdown-background-color" title="A color value (e.g. '#FF0000') 
or the name of a HTML color (e.g. 'red').
Reset the color by deleting the value." >
</div>
<div>
<span class="bmdps-label"></span>
<input type="checkbox" id="markdown-preview-adaptive-width" />
<label for="markdown-preview-adaptive-width">Adaptive preview width</label>
</div>
<div>
<span class="bmdps-label"></span>
<input type="checkbox" id="markdown-graphical-checkbox-list" />
<label for="markdown-graphical-checkbox-list">Graphical checkbox (task) list</label>
</div>
<div>
<span class="bmdps-label"></span>
<input type="checkbox" id="markdown-sanitize-anchors" />
<label for="markdown-sanitize-anchors">Sanitize anchors (HTML5)</label>
</div>
</div>
<div id="code-highlighting" class="tab-pane">
<div>
<span class="bmdps-label">Highlight Theme</span>
<select id="markdown-highlight-theme">
<option value="agate">Agate</option>
<option value="androidstudio">Androidstudio</option>
<option value="arduino-light">Arduino Light</option>
<option value="arta">Arta</option>
<option value="ascetic">Ascetic</option>
<option value="atelier-cave-dark">Atelier Cave Dark</option>
<option value="atelier-cave-light">Atelier Cave Light</option>
<option value="atelier-dune-dark">Atelier Dune Dark</option>
<option value="atelier-dune-light">Atelier Dune Light</option>
<option value="atelier-estuary-dark">Atelier Estuary Dark</option>
<option value="atelier-estuary-light">Atelier Estuary Light</option>
<option value="atelier-forest-dark">Atelier Forest Dark</option>
<option value="atelier-forest-light">Atelier Forest Light</option>
<option value="atelier-heath-dark">Atelier Heath Dark</option>
<option value="atelier-heath-light">Atelier Heath Light</option>
<option value="atelier-lakeside-dark">Atelier Lakeside Dark</option>
<option value="atelier-lakeside-light">Atelier Lakeside Light</option>
<option value="atelier-plateau-dark">Atelier Plateau Dark</option>
<option value="atelier-plateau-light">Atelier Plateau Light</option>
<option value="atelier-savanna-dark">Atelier Savanna Dark</option>
<option value="atelier-savanna-light">Atelier Savanna Light</option>
<option value="atelier-seaside-dark">Atelier Seaside Dark</option>
<option value="atelier-seaside-light">Atelier Seaside Light</option>
<option value="atelier-sulphurpool-dark">Atelier Sulphurpool Dark</option>
<option value="atelier-sulphurpool-light">Atelier Sulphurpool Light</option>
<option value="atom-one-dark">Atom One Dark</option>
<option value="atom-one-light">Atom One Light</option>
<option value="brown-paper">Brown Paper</option>
<option value="codepen-embed">Codepen Embed</option>
<option value="color-brewer">Color Brewer</option>
<option value="darcula">Darcula</option>
<option value="dark">Dark</option>
<option value="darkula">Darkula</option>
<option value="default">Default</option>
<option value="docco">Docco</option>
<option value="dracula">Dracula</option>
<option value="far">Far</option>
<option value="foundation">Foundation</option>
<option value="github-gist">Github Gist</option>
<option value="github">Github</option>
<option value="googlecode">Googlecode</option>
<option value="grayscale">Grayscale</option>
<option value="gruvbox-dark">Gruvbox Dark</option>
<option value="gruvbox-light">Gruvbox Light</option>
<option value="hopscotch">Hopscotch</option>
<option value="hybrid">Hybrid</option>
<option value="idea">Idea</option>
<option value="ir-black">IR Black</option>
<option value="kimbie.dark">Kimbie.Dark</option>
<option value="kimbie.light">Kimbie.Light</option>
<option value="magula">Magula</option>
<option value="mono-blue">Mono Blue</option>
<option value="monokai-sublime">Monokai Sublime</option>
<option value="monokai">Monokai</option>
<option value="obsidian">Obsidian</option>
<option value="ocean">Ocean</option>
<option value="paraiso-dark">Paraiso Dark</option>
<option value="paraiso-light">Paraiso Light</option>
<option value="pojoaque">Pojoaque</option>
<option value="purebasic">Purebasic</option>
<option value="qtcreator_dark">QTcreator Dark</option>
<option value="qtcreator_light">QTcreator Light</option>
<option value="railscasts">Railscasts</option>
<option value="rainbow">Rainbow</option>
<option value="school-book">School Book</option>
<option value="solarized-dark">Solarized Dark</option>
<option value="solarized-light">Solarized Light</option>
<option value="sunburst">Sunburst</option>
<option value="tomorrow-night-blue">Tomorrow Night Blue</option>
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
<option value="tomorrow-night">Tomorrow Night</option>
<option value="tomorrow">Tomorrow</option>
<option value="vs">VS</option>
<option value="xcode">XCode</option>
<option value="xt256">XT256</option>
<option value="zenburn">Zenburn</option>
</select>
</div>
<div>
<span class="bmdps-label"></span>
<input type="checkbox" id="markdown-highlight-active" />
<label for="markdown-highlight-active">Code syntax highlighting</label>
</div>
</div>
<div id="extension-behavior" class="tab-pane">
<div>
<span class="bmdps-label"></span>
<input type="checkbox" id="markdown-activate-preview-on-start" />
<label for="markdown-activate-preview-on-start">Activate Markdown Preview on start</label>
</div>
<div>
<span class="bmdps-label"></span>
<input type="checkbox" id="markdown-preview-sync-scroll" />
<label for="markdown-preview-sync-scroll" >Sync scroll position</label>
</div>
</div>
</div>
</div>
<!--
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++ END OF THE PANEL HTML CODE +++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-->
</div>
</body>
</html>