Merge pull request #35 from sepich/master

Fix for #33
Specify encoding when opening resource (`utf-8`)

.sublime/MarkdownLivePreview.sublime-settings

@@ -1,4 +1,19 @@
 {
+    // As soon as you open a markdown file, it opens the window preview
     "markdown_live_preview_on_open": false,
-    "load_from_internet_when_starts": ["http://", "https://"]
+
+    // If an image starts with one of those strings, then it will be loaded from internet
+    "load_from_internet_when_starts": ["http://", "https://"],
+
+    // When the preview is opened, the markdown file is closed in the origin window and reopend in
+    // the preview window. If this option is set to 'true', then the markdown file will NOT be
+    // closed in the origin window
+    "keep_open_when_opening_preview": false,
+
+    // Choose what to do with YAML/TOML (---/+++ respectively) headers
+    // Valid values: "wrap_in_pre", "remove".
+    "header_action": "wrap_in_pre",
+
+    // Wait at least the specified *seconds* before updating the preview.
+    "update_preview_every": 0
 }

MLPApi.py

@@ -7,6 +7,8 @@ import os.path
 from html.parser import HTMLParser
 
 from .lib import markdown2 as md2
+from .lib.pre_tables import pre_tables
+
 from .escape_amp import *
 from .functions import *
 from .setting_names import *
@@ -15,21 +17,10 @@ from random import randint as rnd
 
 __folder__ = os.path.dirname(__file__)
 
-USER_STYLE_FILE = os.path.join(os.path.dirname(__folder__), 'User', 'MarkdownLivePreview.css')
 
 # used to store the phantom's set
 windows_phantom_set = {}
 
-def plugin_loaded():
-    global DEFAULT_STYLE_FILE
-    DEFAULT_STYLE_FILE = sublime.load_resource('Packages/MarkdownLivePreview/default.css')
-
-def get_preview_name(md_view):
-    file_name = md_view.file_name()
-    name = md_view.name() \
-           or os.path.basename(file_name) if file_name else None \
-           or 'Untitled'
-    return name + ' - Preview'
 
 def create_preview(window, file_name):
     preview = window.new_file()
@@ -41,42 +32,54 @@ def create_preview(window, file_name):
 
     return preview
 
-def get_style():
-    content = ''.join([line.strip() + ' ' for line in DEFAULT_STYLE_FILE.splitlines()])
-    if os.path.exists(USER_STYLE_FILE):
-        with open(USER_STYLE_FILE) as fp:
-            content += '\n' + fp.read() + '\n'
-    return content
+def markdown2html(md, basepath, color_scheme):
+
+    # removes/format the YAML/TOML header.
+    md = manage_header(md, get_settings().get('header_action'))
+
+    html = '<style>\n{}\n</style>\n'.format(get_style(color_scheme))
+
+
+    # the option no-code-highlighting does not exists in the official version of markdown2 for now
+    # I personaly edited the file (markdown2.py:1743)
+    html += md2.markdown(md, extras=['fenced-code-blocks', 'tables', 'strike'])
+
+    # tables aren't supported by the Phantoms
+    # This function transforms them into aligned ASCII tables and displays them in a <pre> block
+    # (the ironic thing is that they aren't supported either :D)
+    html = pre_tables(html)
+
+    # pre block are not supported by the Phantoms.
+    # This functions replaces the \n in them with <br> so that it does (1/2)
+    html = pre_with_br(html)
+
+    # comments aren't supported by the Phantoms
+    # Simply removes them using bs4, so you can be sadic and type `<!-- hey hey! -->`, these one
+    # won't be stripped!
+    html = strip_html_comments(html)
+
+    # exception, again, because <pre> aren't supported by the phantoms
+    # so, because this is monosaped font, I just replace it with a '.' and make transparent ;)
+    html = html.replace('&nbsp;', '<i class="space">.</i>')
+
+    # Phantoms have problem with images size when they're loaded from an url/path
+    # So, the solution is to convert them to base64
+    html = replace_img_src_base64(html, basepath=basepath)
+
+    # BeautifulSoup uses the <br/> but the sublime phantoms do not support them...
+    html = html.replace('<br/>', '<br />').replace('<hr/>', '<hr />')
+    sublime.set_clipboard(html)
+
+    return html
 
 def show_html(md_view, preview):
     global windows_phantom_set
-    html = []
-    html.append('<style>\n{}\n</style>'.format(get_style()))
-    html.append(pre_with_br(md2.markdown(get_view_content(md_view),
-                                         extras=['fenced-code-blocks',
-                                                 'no-code-highlighting'])))
-    # the option no-code-highlighting does not exists
-    # in the official version of markdown2 for now
-    # I personaly edited the file (markdown2.py:1743)
-    html = '\n'.join(html)
-
-    html = html.replace('&nbsp;', '&nbspespace;') # save where are the spaces
-
-    html = HTMLParser().unescape(html)
-
-    html = escape_amp(html)
-
-    # exception, again, because <pre> aren't supported by the phantoms
-    html = html.replace('&nbspespace;', '<i class="space">.</i>')
-    html = replace_img_src_base64(html, basepath=os.path.dirname(
-                                                md_view.file_name()))
+    html = markdown2html(get_view_content(md_view), os.path.dirname(md_view.file_name()), md_view.settings().get('color_scheme'))
 
     phantom_set = windows_phantom_set.setdefault(preview.window().id(),
-                                                 sublime.PhantomSet(preview,
-                                                                    'markdown_live_preview'))
+                                             sublime.PhantomSet(preview, 'markdown_live_preview'))
     phantom_set.update([sublime.Phantom(sublime.Region(0), html, sublime.LAYOUT_BLOCK,
-                                        lambda href: sublime.run_command('open_url',
-                                                                         {'url': href}))])
+                                    lambda href: sublime.run_command('open_url', {'url': href}))])
 
     # lambda href: sublime.run_command('open_url', {'url': href})
     # get the "ratio" of the markdown view's position.

MarkdownLivePreview.py

@@ -2,6 +2,7 @@
 
 import sublime
 import sublime_plugin
+import time
 
 from .MLPApi import *
 from .setting_names import *
@@ -15,6 +16,7 @@ class NewMarkdownLivePreviewCommand(sublime_plugin.ApplicationCommand):
 
         current_view = sublime.active_window().active_view()
         file_name = current_view.file_name()
+        if get_settings().get('keep_open_when_opening_preview') is False:
             current_view.close()
         if file_name is None:
             return sublime.error_message('MarkdownLivePreview: Not supporting '
@@ -45,6 +47,11 @@ class MarkdownLivePreviewListener(sublime_plugin.EventListener):
 
     def update(self, view):
         vsettings = view.settings()
+        now = time.time()
+
+        if now - vsettings.get(LAST_UPDATE, 0) < get_settings().get('update_preview_every'):
+            return
+        vsettings.set(LAST_UPDATE, now)
         if not vsettings.get(PREVIEW_ENABLED):
             return
         id = vsettings.get(PREVIEW_ID)
@@ -57,10 +64,14 @@ class MarkdownLivePreviewListener(sublime_plugin.EventListener):
         show_html(view, preview)
         return view, preview
 
-    def on_modified(self, view):
+    def on_modified_async(self, view):
         if not is_markdown_view(view): # faster than getting the settings
             return
+        delay = get_settings().get('update_preview_every')
+        if not delay:
             self.update(view)
+        else:
+            sublime.set_timeout(lambda: self.update(view), delay * 1000)
 
     def on_window_command(self, window, command, args):
         if command == 'close' and window.settings().get(PREVIEW_WINDOW):
@@ -70,12 +81,13 @@ class MarkdownLivePreviewListener(sublime_plugin.EventListener):
     def on_activated_async(self, view):
         vsettings = view.settings()
 
-        if (is_markdown_view(view)
-            and get_settings().get('markdown_live_preview_on_open')
+        if (is_markdown_view(view) and get_settings().get(ON_OPEN)
             and not vsettings.get(PREVIEW_ENABLED)
             and vsettings.get('syntax') != 'Packages/MarkdownLivePreview/' + \
                                            '.sublime/MarkdownLivePreviewSyntax' + \
-                                           '.hidden-tmLanguage'):
+                                           '.hidden-tmLanguage'
+            and not any(filter(lambda window: window.settings().get(PREVIEW_WINDOW) is True,
+                               sublime.windows()))):
             sublime.run_command('new_markdown_live_preview')
 
 

README.md

@@ -4,93 +4,54 @@ This is a sublime text **3** plugin that allows you to preview your markdown ins
 
 ### Dependencies
 
-**None**! There is no dependency! It uses [markdown2](https://github.com/trentm/python-markdown2) but it's a one file plugin, so it's included in the package.
+**None! There is no dependency!** It uses [markdown2](https://github.com/trentm/python-markdown2) but it's a one file plugin, so it's included in the package.
 
 ## Installation
 
-MarkdownLivePreview is available on the default channel of [PackageControl](http://packagecontrol.io), which means you just have to
+MarkdownLivePreview is available on the default channel of
+[PackageControl](http://packagecontrol.io), which means you just have to
 
 1. Open the command palette (`ctrl+shift+p`)
 2. Search for: `Package Control: Install Package`
 3. Search for: `MarkdownLivePreview`
 4. hit <kbd>enter</kbd>
 
-to have MarkdownLivePreview working on your computer. Cool right? You can [thank package control](https://packagecontrol.io/say_thanks) for this.
+to have MarkdownLivePreview working on your computer. Cool right? You can
+[thank package control](https://packagecontrol.io/say_thanks) for this. :wink:
 
 ### Usage
 
-You can choose to enable MarkdownLivePreview by pressing <kbd>alt+m</kbd> or selecting in the command palette `MarkdownLivePreview: Edit Current File`. Note that you need to be editing (simply having the focus on) a markdown file. Because [Markdown Extended][markdown-extended] did a good job, it's compatible with this plugin.
+You can choose to enable MarkdownLivePreview by pressing <kbd>alt+m</kbd> or selecting in the
+command palette `MarkdownLivePreview: Edit Current File`. Note that you need to be editing (simply
+having the focus on) a markdown file. Because [Markdown Extended][markdown-extended] did a good job,
+it's compatible with this plugin.
 
-So, once you've run it, it will open a new window, with only your markdown file, with the preview. Once you're done, close whichever file and it'll close the entire window.
+So, once you've run it, it will open a new window, with only your markdown file, with the preview.
+Once you're done, close whichever file and it'll close the entire window.
 
-*Notice that it will close the entire window if you close __whichever__ file. It means that if you open a random file in this window, and then close it, it'll close the entire window still*
+*Notice that it will close the entire window if you close __whichever__ file. It means that if you*
+*open a random file in this window, and then close it, it'll close the entire window still*
 
-### Settings
-
-- `markdown_live_preview_on_open`: if set to `true`, as soon as you open a markdown file, the preview window will popup (thanks to [@ooing](https://github.com/ooing) for its [suggestion](https://github.com/math2001/MarkdownLivePreview/issues/7#issue-199464852)). Default to `false`
-- `load_from_internet_when_starts`: every images that starts with any of the string specified in this list will be loaded from internet. Default to `["http://", "https://"]`
-
-Note: To edit your settings, search up in the command palette `Preferences: MarkdownLivePreview Settings`, or by using the menu: `Preferences → Packages Settings → MarkdownLivePreview → Settings` ;. It's not your global settings, but only the `MarkdownLivePreview`'s one
-
-### Syntax Specific Settings
-
-This in an other "type" of setting. :laughing: If you have a look at the syntax of the preview file (not the markdown one, really the preview), you'll see that the syntax is `MarkdownLivePreviewSyntax`. This mean that you can specify specific settings for this specific syntax (such as `word_wrap: true`, `rulers: []`, etc).
-
-To do so, you can
-
-1. focus the *preview* (<kbd>ctrl+2</kbd> to focus the second group, so, by default, the preview's group)
-2. search up in the command palette `Preferences: Settings Syntax Specific`. It's in the *right* file that you can add the settings you want (not the left one).
-
-Note: MarkdownLivePreview will actualy look in this file for settings that aren't supported by default. Here they are:
-
-- `show_tabs`
-- `show_minimap`
-- `show_status_bar`
-- `show_sidebar`
-- `show_menus`
-
-They talk for themself, don't they? All of them takes a boolean (`true` or `false`). Note that those settings are *window* specific, not just view specific (that's why they aren't supported). It means that they'll affect the entire window, and every view in it.
-
-Here is an example of syntax specific settings for MarkdownLivePreviewSyntax:
-
-```json
-{
-    "show_menus": false,
-    "show_tabs": false,
-    "show_minimap": false,
-    "gutter": false,
-    "rulers": [],
-    "word_wrap": true
-}
-```
-
-And here's what you'll get:
-
-![MarkdownLivePreview Screenshoot](screenshoots/syntax-specific-settings.png)
-
-*Note: to close a file, you can do <kbd>ctrl+w</kbd> (on Mac OS, it's <kbd>cmd+w</kbd>)*
-
-### Clear the cache
-
-MarkdownLivePreview caches every images it loads from internet (otherwise, you'd never see your images, or you'd need to have a *really* fast internet connection :smile:). So, if for some reason you want to clear the cache (a simple file), you can do so from the command palette by running `
+For further infos, please [read the docs](https://math2001.github.io/MarkdownLivePreview/)!
 
 ### Demo
 
 ![demo](demo.gif)
 
-### Custom css
-
-It is possible to set your own css. But, be carefull, you have to respect [those rules](http://www.sublimetext.com/docs/3/minihtml.html#css). Just go to `Preferences → Package Settings → MarkdownLivePreview → Style - CSS`. It will open a css file, here: `$packages/User/MarkdownLivePreview.css`. Just save it and it will automatically use it instead of the default one.
-
 ### Somethings wrong!!
 
-If you find that something's wrong with this package, you can let me know by raising an issue on the [GitHub issue tracker][github-issue-tracker]
-
-### How to open the [README](http://github.com/math2001/MarkdownLivePreview/README.md)
-
-Some of the package add a command in the menus, others in the command palette, or other nowhere. None of those options are really good, especially the last one on ST3 because the packages are compressed. But, fortunately, there is plugin that exists and **will solve this problem** for us (and he has a really cute name, don't you think?): [ReadmePlease](https://packagecontrol.io/packages/ReadmePlease).
+If you find that something's wrong with this package, you can let me know by raising an issue on the
+[GitHub issue tracker][github-issue-tracker]
 
+### How to open the [README][]
 
+Some of the package add a command in the menus, others in the command palette, or other nowhere.
+None of those options are really good, especially the last one on ST3 because the packages are
+compressed. But, fortunately, there is plugin that exists and **will solve this problem** for us
+(and he has a really cute name, don't you think?):
+[ReadmePlease](https://packagecontrol.io/packages/ReadmePlease).
 
 [markdown-extended]: https://packagecontrol.io/packages/Markdown%20Extended
 [github-issue-tracker]: https://github.com/math2001/MarkdownLivePreview/issues
+[st-css-rules]: http://www.sublimetext.com/docs/3/minihtml.html#css
+[README]: http://github.com/math2001/MarkdownLivePreview/README.md

default.css

@@ -15,7 +15,6 @@ blockquote {
     font-style: italic;
     display: block;
     margin-left: 30px;
-    border: 1px solid red;
 }
 
 code {
@@ -24,26 +23,39 @@ code {
     background-color: var(--light-bg);
     margin: 0;
     border-radius: 3px;
-    margin: 5px;
 }
 
-pre {
+div.codehilite {
     display: block;
     margin-top: 20px;
-    line-height: 1.7;
     background-color: var(--light-bg);
     padding-left: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
     width: 100%;
     border-radius: 3px;
 }
 pre code {
-    padding-left: 0;
+    padding: 0;
 }
 
 pre code .space {
-    color: var(--light-bg)
+    color: var(--light-bg);
 }
 
+pre.table {
+    background-color: var(--background);
+}
+pre.table code {
+    background-color: var(--background);
+    padding: 0;
+    margin: 0;
+}
+pre.table code .space {
+    color: var(--background);
+}
+
+
 kbd {
     padding: 0 5px;
     background-color: var(--very-light-bg);

dependencies.json

@@ -0,0 +1,8 @@
+{
+    "*": {
+        "*": [
+            "bs4",
+            "pygments"
+        ]
+    }
+}

devListener.py

@@ -7,7 +7,6 @@ import os.path
 class MLPDevListener(sublime_plugin.EventListener):
 
     def on_post_save(self, view):
-        # return
         if not (os.path.dirname(__file__) in view.file_name() and
             view.file_name().endswith('.py')):
             return
@@ -16,5 +15,6 @@ class MLPDevListener(sublime_plugin.EventListener):
                                  'MarkdownLivePreview.py'),
             'scripts': ['image_manager', 'functions', 'MLPApi',
                         'setting_names'],
+            'folders': ['lib'],
             'quiet': True
         })

docs/index.md

@@ -61,6 +61,28 @@ As told in the introduction, MarkdownLivePreview is very easy to use:
 
 That's it. That's all you need to do to preview your markdown!
 
+### Settings
+
+To edit MarkdownLivePreview's settings, you just need to search in the command palette
+`Preferences: MarkdownLivePreview Settings`, or from the menus:
+*Preferences → Package Settings → MarkdownLivePreview → Settings*
+
+Do not edit the left file (by default, you cannot), but the right one. This right file will
+override the default one (on the left), and will be saved in your `User` folder, which makes it easy
+to back up.
+
+- `markdown_live_preview_on_open`: if set to `true`, as soon as you open a markdown file, the
+preview window will popup (thanks to[@ooing][] for its [suggestion][@ooing suggestion]). Default to
+`false`
+- `load_from_internet_when_starts`: every images that starts with any of the string specified in
+this list will be loaded from internet. Default to `["http://", "https://"]`
+- `header_action`: If you're writing a blog with some markdown and a static website generator, you
+probably have a YAML header. By default, this header will be displayed in a `pre` block. If you want
+to hide it, then just change the value to `remove`. Thanks to [@tanhanjay][] for
+[letting me know][front-matter-issue]!
+- `keep_open_when_opening_preview`: Each time the preview window is opened, the original markdown
+view is closed. If you want to keep it opened, just set this setting to `true`
+
 ### Custom CSS
 
 If you want to, you can add custom `CSS` to the MarkdownLivePreview's default stylesheet.
@@ -121,7 +143,7 @@ As you probably guessed those settings takes a bool for value (`true` or `false`
 
 ### Recommendation
 
-Here's what I'd recommend (and use):
+Here's what I'd recommend for your MarkdownLivePreviewSyntax's settings (and what I use):
 
 ```json
 {
@@ -134,15 +156,19 @@ Here's what I'd recommend (and use):
 }
 ```
 
+And here's what you'll get (With the awesome [Boxy Theme][] and its [Monokai Color Scheme][]):
+
+![MarkdownLivePreview Screenshoot](imgs/syntax-specific-settings.png)
+
 !!! tip
-    On Windows at least, you can press <kbd>alt</kbd> to focus (so show) the menu, even if they're
-    originally hidden
+    On Windows at least, you can press <kbd>alt</kbd> to focus (so show) the menus, even if they're
+    originally hidden.
 
 That's it! I hope you'll enjoy using this package! If it's the case, please let your friends know
-about it, and even myself by sending me a [tweet][] or staring the repo
+about it, and even myself by sending me a [tweet][] or staring the repo!
 <iframe
 src="https://ghbtns.com/github-btn.html?user=math2001&repo=MarkdownLivePreview&type=star&count=true&size=large"
-frameborder="0" scrolling="0" width="160px" height="30px"></iframe>!
+frameborder="0" scrolling="0" style="width: 120px; height: 30px; vertical-align: bottom"></iframe>
 
 [st]: https://sublimetext.com
 [Markdown Extended]: https://packagecontrol.io/packages/Markdown%20Extended
@@ -150,3 +176,9 @@ frameborder="0" scrolling="0" width="160px" height="30px"></iframe>!
 [install-pck-con]: https://packagecontrol.io/installation
 [tweet]: https://twitter.com/_math2001
 [GitHub repo]: https://github.com/math2001/MarkdownLivePreview/issues
+[@ooing]: https://github.com/ooing
+[@ooing suggestion]: https://github.com/math2001/MarkdownLivePreview/issues/7#issue-199464852
+[@tanhanjay]: https://github.com/tanhanjay
+[front-matter-issue]: https://github.com/math2001/MarkdownLivePreview/issues/17
+[Boxy Theme]: https://packagecontrol.io/packages/Boxy%20Theme
+[Monokai Color Scheme]: https://github.com/ihodev/sublime-boxy#boxy-monokai--predawn

docs/license.md

@@ -0,0 +1,24 @@
+This project is published under MIT license.
+
+> The MIT License is a permissive license that is short and to the point. It lets people do anything
+> they want with your code as long as they provide attribution back to you and don’t hold you
+> liable.
+>
+> — *from [choosealicense.com](http://choosealicense.com), by [GitHub](https://github.com)*
+
+Copyright 2017 Mathieu PATUREL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+andassociated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

example.md

@@ -1,6 +1,16 @@
+---
+title: Demo
+description: Preview your markdown right in Sublime Text!
+hope: You'll enjoy using it!
+---
+
 # Hello world
 
-Some `inline code` with *italic* and **bold** text.
+<!-- supports comments -->
+
+And `<!-- vicious ones ;) -->`
+
+Some `inline code` with *italic*, **bold** text, and ~~strike through~~.
 
 ```python
 import this
@@ -16,6 +26,15 @@ if you is moods.curious:
 - you need
 - todos
 
+
+|     ID    |  Name |
+|-----------|-------|
+| 56        | Matt  |
+| 42        | Colin |
+| 23        | Lisa  |
+| 45        | John  |
+| `<table>` | `><`  |
+
 ![Sublime Text Logo](https://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png)
 
 Some plugin I just *need*:

functions.py

@@ -4,38 +4,58 @@ import os.path
 import sublime
 import re
 from .image_manager import ImageManager
+from .lib.pygments_from_theme import pygments_from_theme
+from bs4 import BeautifulSoup, Comment as html_comment
 
 def plugin_loaded():
-    global error404, loading
+    global error404, loading, DEFAULT_STYLE, USER_STYLE_FILE
     loading = sublime.load_resource('Packages/MarkdownLivePreview/loading.txt')
     error404 = sublime.load_resource('Packages/MarkdownLivePreview/404.txt')
 
+    DEFAULT_STYLE = sublime.load_resource('Packages/MarkdownLivePreview/default.css')
+    USER_STYLE_FILE = os.path.join(sublime.packages_path(), 'User', "MarkdownLivePreview.css")
+
+MATCH_YAML_HEADER = re.compile(r'^([\-\+])\1{2}\n(?P<content>.+)\n\1{3}\n', re.DOTALL)
+
+def strip_html_comments(html):
+    soup = BeautifulSoup(html, 'html.parser')
+    for element in soup.find_all(text=lambda text: isinstance(text, html_comment)):
+        element.extract()
+    return str(soup)
+
+def manage_header(md, action):
+    matchobj = MATCH_YAML_HEADER.match(md)
+    if not matchobj:
+        return md
+    if action == 'remove':
+        return md[len(matchobj.group(0)):]
+    elif action == 'wrap_in_pre':
+        return '<pre><code>' + matchobj.group('content') + '</code></pre>' \
+        + md[len(matchobj.group(0)):]
+
+    raise ValueError('Got an unknown action: "{}"'.format(action))
+
+def get_preview_name(md_view):
+    file_name = md_view.file_name()
+    name = md_view.name() \
+           or os.path.basename(file_name) if file_name else None \
+           or 'Untitled'
+    return name + ' - Preview'
 
 def replace_img_src_base64(html, basepath):
-    """Really messy, but it works (should be updated)"""
-    index = -1
-    tag_start = '<img src="'
-    shtml, html = html, list(html)
-    while True:
-        index = shtml.find(tag_start, index + 1)
-        if index == -1:
-            break
-        path, end = get_content_till(html, '"', start=index + len(tag_start))
-        if ''.join(path).startswith('data:image/'):
+    soup = BeautifulSoup(html, 'html.parser')
+    load_from_internet_starters = get_settings().get('load_from_internet_when_starts')
+    for img in soup.find_all('img'):
+        if img['src'].startswith('data:image/'):
             continue
-        if ''.join(path).startswith(tuple(get_settings().get('load_from_internet' + \
-                                                    '_when_starts', []))):
-            image = ImageManager.get(''.join(path))
-            image = image or loading
+        elif img['src'].startswith(tuple(load_from_internet_starters)):
+            image = ImageManager.get(img['src']) or loading
+        else: # this is a local image
+            image = to_base64(os.path.join(basepath, img['src']))
 
-        else:
-            # local image
-            path = ''.join(path)
-            path = os.path.join(basepath, path)
-            image = to_base64(path)
-        html[index+len(tag_start):end] = image
-        shtml = ''.join(html)
-    return ''.join(html)
+        img['src'] = image
+
+    return str(soup)
 
 def is_markdown_view(view):
     return 'markdown' in view.scope_name(0)
@@ -86,17 +106,34 @@ def get_view_from_id(window, id):
 def get_settings():
     return sublime.load_settings('MarkdownLivePreview.sublime-settings')
 
+
+def _pre_with_spaces(code):
+    for tag in code.find_all(text=True):
+        tag.replace_with(BeautifulSoup(str(tag).replace('\t', ' ' * 4).replace(' ', '<i class="space">.</i>').replace('\n', '<br />'), 'html.parser'))
+    return code
+
 def pre_with_br(html):
     """Because the phantoms of sublime text does not support <pre> blocks
     this function replaces every \n with a <br> in a <pre>"""
+    soup = BeautifulSoup(html, 'html.parser')
+    for pre in soup.find_all('pre'):
+        code = pre.find('code')
+        code.replace_with(_pre_with_spaces(code))
+    return str(soup)
 
-    while True:
-        obj = re.search(r'<pre>(.*?)</pre>', html, re.DOTALL)
-        if not obj:
-            break
-        html = list(html)
-        html[obj.start(0):obj.end(0)] = '<pre >' + ''.join(html[obj.start(1):obj.end(1)]) \
-                                            .replace('\n', '<br>') \
-                                            .replace(' ', '&nbsp;') + '</pre>'
-        html = ''.join(html)
-    return html
+
+def get_style(color_scheme):
+    css = DEFAULT_STYLE
+    if os.path.exists(USER_STYLE_FILE):
+        with open(USER_STYLE_FILE) as fp:
+            css += '\n' + fp.read() + '\n'
+    if color_scheme:
+        css += pygments_from_theme(get_resource(color_scheme))
+    return ''.join([line.strip() + ' ' for line in css.splitlines()])
+
+def get_resource(resource):
+    if os.path.exists(os.path.join(sublime.packages_path(), '..', resource)):
+        with open(os.path.join(sublime.packages_path(), '..', resource), encoding='utf-8') as fp:
+            return fp.read()
+    else:
+        return sublime.load_resource(resource)

lib/pre_tables.py

@@ -0,0 +1,52 @@
+# -*- encoding: utf-8 -*-
+
+"""
+'pre_tables' transform *html* tables into markdown tables, and put them in some <pre><code> tags
+"""
+
+from bs4 import BeautifulSoup
+
+def python_table(s_table):
+    """Transform BeautifulSoup table into list of list"""
+    rows = []
+    for row in s_table.find_all('tr'):
+        # rows.append(list(map( lambda td: td.text, row.find_all(['th', 'td']) )))
+        rows.append(row.find_all(['th', 'td']))
+    return rows
+
+def pre_table(s_table):
+    rows = python_table(s_table)
+    cols_width = [len(cell) for cell in rows[0]]
+    for j, row in enumerate(rows):
+        for i, cell in enumerate(row):
+            if cols_width[i] < len(cell.text):
+                cols_width[i] = len(cell.text)
+    text = '<pre class="table"><code>'
+    for i, row in enumerate(rows):
+        if i == 1:
+            for j, cell in enumerate(row):
+                text += '|' + '-' * (cols_width[j] + 2)
+            text += '|\n'
+
+        for j, cell in enumerate(row):
+            text += '| '
+            if cell.name == 'th':
+                title = ' ' * ((cols_width[j] - len(cell.text)) // 2) \
+                        + ''.join(str(node) for node in cell.contents) \
+                        + ' ' * int(round((cols_width[j] - len(cell.text)) / 2 ) + 1)
+                # + 1 because of the added space before the closing | of each cell
+                if cols_width[j] + 1 != len(title):
+                    title += ' '
+                text += title
+            else:
+                text += ''.join(str(node) for node in cell.contents) \
+                        + ' ' * (cols_width[j] - len(cell.text) + 1)
+        text += '|\n'
+    text += '</pre></code>'
+    return text
+
+def pre_tables(html):
+    soup = BeautifulSoup(html, 'html.parser')
+    for table in soup.find_all('table'):
+        table.replace_with(BeautifulSoup(pre_table(table), 'html.parser'))
+    return str(soup)

lib/pygments_from_theme.py

@@ -0,0 +1,167 @@
+# -*- encoding: utf-8 -*-
+
+import os
+import sys
+from xml.dom.minidom import parseString
+from collections import defaultdict
+
+class Style:
+    # .highlight is the wrapper class for highlighting therefore
+    # all css rules are prefixed with .highlight
+    PREFIX = '.codehilite'
+
+    # -----------------------------------------
+    #  Params
+    #  name: the name of the class
+    #  args: each argument is an array.
+    #  Each array consists of css properties
+    #  that is either a color or font style
+    #  ----------------------------------------
+
+    def __init__(self, name, *args):
+        self.name = name   # Name of the class
+        self.rules = {}   # The css rules
+        for arr in args:
+            for value in arr:
+                # Only define properties if they are already not defined
+                # This allows "cascading" if rules to be applied
+                if value.startswith('#') and 'color' not in self.rules:
+                    self.rules['color'] = value
+                else:
+                    if 'italic' in value and 'font-style' not in self.rules:
+                        self.rules['font-style'] = 'italic'
+                    if 'underline' in value and 'text-decoration' not in self.rules:
+                        self.rules['text-decoration'] = 'underline'
+                    if 'bold' in value and 'font-weight' not in self.rules:
+                        self.rules['font-weight'] = 'bold'
+
+    # Helper method for creating the css rule
+    def _join_attr(self):
+        temp = []
+        if(len(self.rules) == 0):
+            return ''
+        for key in self.rules:
+            temp.append(key + ': ' + self.rules[key])
+        return '; '.join(temp) + ';'
+
+    def toString(self):
+        joined = self._join_attr()
+        if joined:
+            return "%s .%s { %s }" % (Style.PREFIX, self.name, joined)
+        return ''
+
+
+# Crappy xml parsing function for getting the
+# colors and font styles from colortheme file
+
+
+def get_settings(color_scheme_content):
+    settings = defaultdict(lambda: [])
+    dom = parseString(color_scheme_content)
+    arr = dom.getElementsByTagName('array')[0]
+    editor_cfg = arr.getElementsByTagName('dict')[0].getElementsByTagName('dict')[0]
+    editor_vals = editor_cfg.getElementsByTagName('string')
+    background = editor_vals[0].firstChild.nodeValue
+    text_color = editor_vals[2].firstChild.nodeValue
+    settings['editor_bg'] = background
+    settings['text_color'] = text_color
+    for node in arr.childNodes:
+        if node.nodeName == "dict":
+            try:
+                setting = node.getElementsByTagName('string')[1].firstChild.nodeValue
+                attrs = []
+                values = node.getElementsByTagName('dict')[0].getElementsByTagName('string')
+                for v in values:
+                    if v.firstChild:
+                        a = str(v.firstChild.nodeValue).strip()
+                        attrs.append(a)
+                for s in setting.split(', '):
+                    settings[s] = attrs
+            except:
+                continue
+    return settings
+
+
+def pygments_from_theme(color_scheme_content):
+    settings = get_settings(color_scheme_content)
+    styles = []
+
+    #Generic
+    styles.append(Style('ge', ['italic']))
+    styles.append(Style('gs', ['bold']))
+
+    # Comments
+    styles.append(Style('c', settings['comment']))
+    styles.append(Style('cp', settings['comment']))
+    styles.append(Style('c1', settings['comment']))
+    styles.append(Style('cs', settings['comment']))
+    styles.append(Style('cm', settings['comment.block'], settings['comment']))
+
+    # Constants
+    styles.append(Style('m', settings['constant.numeric'], settings['constant.other'], settings['constant'], settings['support.constant']))
+    styles.append(Style('mf', settings['constant.numeric'], settings['constant.other'], settings['constant'], settings['support.constant']))
+    styles.append(Style('mi', settings['constant.numeric'], settings['constant.other'], settings['constant'], settings['support.constant']))
+    styles.append(Style('mo', settings['constant.numeric'], settings['constant.other'], settings['constant'], settings['support.constant']))
+    styles.append(Style('se', settings['constant.language'], settings['constant.other'], settings['constant'], settings['support.constant']))
+    styles.append(Style('kc', settings['constant.language'], settings['constant.other'], settings['constant'], settings['support.constant']))
+
+    #Keywords
+    styles.append(Style('k', settings['entity.name.type'], settings['support.type'], settings['keyword']))
+    styles.append(Style('kd', settings['storage.type'], settings['storage']))
+    styles.append(Style('kn', settings['support.function.construct'], settings['keyword.control'], settings['keyword']))
+    styles.append(Style('kt', settings['entity.name.type'], settings['support.type'], settings['support.constant']))
+
+    #String
+    styles.append(Style('settings', settings['string.quoted.double'], settings['string.quoted'], settings['string']))
+    styles.append(Style('sb', settings['string.quoted.double'], settings['string.quoted'], settings['string']))
+    styles.append(Style('sc', settings['string.quoted.single'], settings['string.quoted'], settings['string']))
+    styles.append(Style('sd', settings['string.quoted.double'], settings['string.quoted'], settings['string']))
+    styles.append(Style('s2', settings['string.quoted.double'], settings['string.quoted'], settings['string']))
+    styles.append(Style('sh', settings['string']))
+    styles.append(Style('si', settings['string.interpolated'], settings['string']))
+    styles.append(Style('sx', settings['string.other'], settings['string']))
+    styles.append(Style('sr', settings['string.regexp'], settings['string']))
+    styles.append(Style('s1', settings['string.quoted.single'], settings['string']))
+    styles.append(Style('ss', settings['string']))
+
+    #Name
+    styles.append(Style('na', settings['entity.other.attribute-name'], settings['entity.other']))
+    styles.append(Style('bp', settings['variable.language'], settings['variable']))
+    styles.append(Style('nc', settings['entity.name.class'], settings['entity.other.inherited-class'], settings['support.class']))
+    styles.append(Style('no', settings['constant.language'], settings['constant']))
+    styles.append(Style('nd', settings['entity.name.class']))
+    styles.append(Style('ne', settings['entity.name.class']))
+    styles.append(Style('nf', settings['entity.name.function'], settings['support.function']))
+    styles.append(Style('nt', settings['entity.name.tag'], settings['keyword']))
+    styles.append(Style('nv', settings['variable'], [settings['text_color']]))
+    styles.append(Style('vc', settings['variable.language']))
+    styles.append(Style('vg', settings['variable.language']))
+    styles.append(Style('vi', settings['variable.language']))
+
+    #Operator
+    styles.append(Style('ow', settings['keyword.operator'], settings['keyword.operator'], settings['keyword']))
+    styles.append(Style('o', settings['keyword.operator'], settings['keyword.operator'], settings['keyword']))
+
+    # Text
+    styles.append(Style('n', [settings['text_color']]))
+    styles.append(Style('nl', [settings['text_color']]))
+    styles.append(Style('nn', [settings['text_color']]))
+    styles.append(Style('nx', [settings['text_color']]))
+    styles.append(Style('bp', settings['variable.language'], settings['variable'], [settings['text_color']]))
+    styles.append(Style('p', [settings['text_color']]))
+
+    css = '{} {{ background-color: {}; color: {}; }}\n'.format(Style.PREFIX, settings['editor_bg'], settings['text_color'])
+    for st in styles:
+        css_style = st.toString()
+        if css_style:
+            css += css_style + '\n'
+
+    return css
+
+if __name__ == "__main__":
+    args = sys.argv[1:]
+    if len(args) < 1:
+        print("Please provide the .tmTheme file!", file=sys.stderr)
+        sys.exit(1)
+
+    print(pygments_from_theme(args[0]))

messages.json

@@ -2,5 +2,6 @@
     "install": "messages/install.txt",
     "1.1.2": "messages/1.1.2.txt",
     "2.0.1": "messages/2.0.1.txt",
-    "2.2.1": "messages/2.2.0.txt"
+    "2.2.1": "messages/2.2.0.txt",
+    "2.4.1": "messages/2.4.txt"
 }

messages/2.4.txt

@@ -0,0 +1,10 @@
+Sorry to interrupt you... :(
+
+Some stuff changed on MarkdownLivePreview. It now supports YAML/TOML front matters. You can hide it,
+or show it in a pre block (edit your settings for this).
+
+Hope you'll enjoy it!
+
+Tip of the day: If you want a VIM-like search feature, then just press 'ctrl/cmd+i'
+                (Find → Incremental find). You can still go the next match by pressing 'f3', and to
+                the previous one by pressing 'shift+f3'

setting_names.py

@@ -6,3 +6,5 @@ IS_PREVIEW = 'is_markdown_live_preview'
 IS_HIDDEN = 'is_hidden_markdown_live_preview'
 MD_VIEW_ID = 'markdown_live_preview_md_id'
 PREVIEW_WINDOW = 'markdown_live_preview_window'
+ON_OPEN = 'markdown_live_preview_on_open'
+LAST_UPDATE = 'markdonw_live_preview_last_run'

test.md

@@ -0,0 +1,16 @@
+```python
+import this
+
+if you.are('new'):
+    print('Welcome!')
+    if you.are('brand new'):
+        print("You'll see, python's just awesome")
+else:
+    print('Hello!')
+```
+
+![img](docs/imgs/syntax-specific-settings.png)
+
+<ol>
+    <li>test</li>
+</ol>

todo

@@ -4,15 +4,17 @@ Fast:
 Medium:
   ☐ auto refresh preview if loading images
   ☐ use alt attribute for 404 error
+  ☐ optimize usage of BeautifulSoup
 
 Long:
   ☐ support anchor (TOC) @big
 
 Unknown:
-
+   ☐ properly convert tmtheme to css
 
 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
 Archive:
+ ✔ add settings to keep md view open #13 @done Sat 11 Feb 2017 at 09:10 @project(Fast)
  ✔ fix custom css @bug @done Sun 22 Jan 2017 at 18:40 @project(Medium)
  ✘ check how many times is the show_html function called @cancelled Sun 22 Jan 2017 at 18:40 @project(Unknown)
  ✔ sync scroll @needsUpdate(because of images) @done Sun 22 Jan 2017 at 18:39 @project(Fast)