Possibility to add own themes and to save the HTML

[mpathy]

It would be great if there would be the possibility to add own themes to the themes folder, and that the plugin just scans the folder and list all entries in the directories.

Also it would be nice to have the possibility to save the preview HTML - not everyone has their own build infrastructure for markdown files, or uses it in Github or some other site - and just want to generate a HTML file easily.

+1

[mpathy]

Would be also okay if its just semiautomagically.. Like, moving some CSS to some folder and editing some config file.. Wouldnt even need UI for that..

[khatastroffik]

Straight forward - adding CSS themes:

1. download a Markdown CSS theme file e.g. from markdown-css-themes
2. save it to the plugin folder under X:\Users\"myaccount"\AppData\Roaming\Brackets\extensions\user\gruehle.markdown-preview\themes
3. edit the file settings.html in X:\Users\"myaccount"\AppData\Roaming\Brackets\extensions\user\gruehle.markdown-preview\templates as in the following adding the Markdown7 and the Screen themes

...
<div class="md-settings-row">
        <span class="md-settings-label">Theme</span>
        <select id="markdown-preview-theme">
            <option value="clean">Light</option>
            <option value="dark">Dark</option>
            <option value="serif">Classic</option>
            <option value="markdown7">Markdown7</option> <!-- ADDED -->
            <option value="screen">Screen</option> <!-- ADDED -->
        </select>
    </div>

1. reload/refresh Brackets Plugins (press [F5])
2. voila !

Straight forward - exporting the Preview:

1. right click within the preview panel -> "view souce".
2. save the temporary file wherever you want.

Though, 2 imperfections here:

• the path to the CSS doesn't match anymore
• the path to the assets/images/... doesn't match anymore

Different "straight forward" solutions should work, depending on how/where you want to save or share those files... you may edit the preview.html in the plugin template directory and the main.js in the plugin root to match your needs... 😄
E.g.:
I modified the main.js file to re-define themeUrl (the baseUrl statement already exists...) so the html file now refer to the markdown preview plugin themes files correctly (html is not sharable but it can be saved locally on my system and the theme works).

// Make <base> tag for relative URLS
var baseUrl = window.location.protocol + "//" + FileUtils.getDirectoryPath(doc.file.fullPath);

// NEW LINE:
var themeUrl = window.location.protocol + "//" + require.toUrl("./themes/" + _prefs.get("theme") + ".css");

// Assemble the HTML source
var htmlSource = _.template(previewHTML)({
  baseUrl    : baseUrl,
  themeUrl   : themeUrl, // MODIFIED
  scrollTop  : scrollPos,
  bodyText   : bodyText
  });