center tables <th>s #12

fix spaces in tables too

MLPApi.py

@@ -7,6 +7,7 @@ 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 *
@@ -20,8 +21,13 @@ USER_STYLE_FILE = os.path.join(os.path.dirname(__folder__), 'User', 'MarkdownLiv
 # used to store the phantom's set
 windows_phantom_set = {}
 
+
 def plugin_loaded():
     global DEFAULT_STYLE_FILE
+    if os.path.exists(os.path.join(__folder__, 'default.css')):
+        with open(os.path.join(__folder__, 'default.css')) as fp:
+            DEFAULT_STYLE_FILE = fp.read()
+    else:
         DEFAULT_STYLE_FILE = sublime.load_resource('Packages/MarkdownLivePreview/default.css')
 
 def get_preview_name(md_view):
@@ -48,35 +54,31 @@ def get_style():
             content += '\n' + fp.read() + '\n'
     return content
 
-def show_html(md_view, preview):
+def markdown2html(md, basepath):
-    global windows_phantom_set
+    html = ''
-    html = []
+    html += '<style>\n{}\n</style>\n'.format(get_style())
-    html.append('<style>\n{}\n</style>'.format(get_style()))
+    # pre_with_br
-    html.append(pre_with_br(md2.markdown(get_view_content(md_view),
+    html += pre_with_br(pre_tables(md2.markdown(md, extras=['fenced-code-blocks',
-                                         extras=['fenced-code-blocks',
+                                                            'no-code-highlighting', 'tables'])))
-                                                 'no-code-highlighting'])))
+    # the option no-code-highlighting does not exists in the official version of markdown2 for now
-    # 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(
+    html = replace_img_src_base64(html, basepath=os.path.dirname(basepath))
-                                                md_view.file_name()))
+    return html
+
+def show_html(md_view, preview):
+    global windows_phantom_set
+    html = markdown2html(get_view_content(md_view), os.path.dirname(md_view.file_name()))
 
     phantom_set = windows_phantom_set.setdefault(preview.window().id(),
-                                                 sublime.PhantomSet(preview,
+                                             sublime.PhantomSet(preview, 'markdown_live_preview'))
-                                                                    'markdown_live_preview'))
     phantom_set.update([sublime.Phantom(sublime.Region(0), html, sublime.LAYOUT_BLOCK,
-                                        lambda href: sublime.run_command('open_url',
+                                    lambda href: sublime.run_command('open_url', {'url': href}))])
-                                                                         {'url': href}))])
 
     # lambda href: sublime.run_command('open_url', {'url': href})
     # get the "ratio" of the markdown view's position.

default.css

@@ -15,7 +15,6 @@ blockquote {
     font-style: italic;
     display: block;
     margin-left: 30px;
-    border: 1px solid red;
 }
 
 code {
@@ -24,24 +23,32 @@ code {
     background-color: var(--light-bg);
     margin: 0;
     border-radius: 3px;
-    margin: 5px;
 }
 
 pre {
     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(--backgroud);
+}
+pre.table code {
+    background-color: var(--backgroud);
+    padding: 0;
+    margin: 0;
 }
 
 kbd {

dependencies.json

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

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
         })

functions.py

@@ -4,6 +4,7 @@ import os.path
 import sublime
 import re
 from .image_manager import ImageManager
+from bs4 import BeautifulSoup
 
 def plugin_loaded():
     global error404, loading
@@ -89,14 +90,9 @@ def get_settings():
 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)
-    while True:
+    for pre in soup.find_all('pre'):
-        obj = re.search(r'<pre>(.*?)</pre>', html, re.DOTALL)
+        code = pre.find('code')
-        if not obj:
+        code.replaceWith(BeautifulSoup(''.join(str(node) for node in pre.contents) \
-            break
+                      .replace('\n', '<br/>').replace(' ', '<i class="space">.</i>'), 'html.parser'))
-        html = list(html)
+    return str(soup).replace('<br/>', '<br />')
-        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

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)

sample.md

@@ -16,7 +16,15 @@ if you is moods.curious:
 - you need
 - todos
 
-![Sublime Text Logo](https://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png)
+|     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*: