@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...
169 lines (160 loc) • 10.8 kB
HTML
<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>
<span class="bmdps-label">Character Encoding</span>
<input type="text" id="markdown-output-character-encoding" title="The character encoding to be set in the output html document." >
</div>
<div>
<span class="bmdps-label"></span>
<button type="button" class="btn" id="detached-preview-button">Open detached preview</button>
</div>
</div>
</div>
</div>