[docs] add custom css part

.sublime/MarkdownLivePreview.sublime-commands

@@ -7,6 +7,13 @@
         "caption": "MarkdownLivePreview: Clear the cache",
         "command": "markdown_live_preview_clear_cache"
     },
+    {
+        "caption": "MarkdownLivePreview: Edit Custom CSS File",
+        "command": "open_file",
+        "args": {
+            "file": "$packages/User/MarkdownLivePreview.css"
+        }
+    },
     {
         "caption": "Preferences: MarkdownLivePreview Settings",
         "command": "edit_settings",

MLPApi.py

@@ -15,8 +15,7 @@ from random import randint as rnd
 
 __folder__ = os.path.dirname(__file__)
 
-STYLE_FILE = os.path.join(os.path.dirname(__folder__), 'User',
-                            'MarkdownLivePreview.css')
+USER_STYLE_FILE = os.path.join(os.path.dirname(__folder__), 'User', 'MarkdownLivePreview.css')
 
 # used to store the phantom's set
 windows_phantom_set = {}
@@ -44,7 +43,10 @@ def create_preview(window, file_name):
 
 def get_style():
     content = ''.join([line.strip() + ' ' for line in DEFAULT_STYLE_FILE.splitlines()])
-    return content + "pre code .space {color: var(--light-bg)}"
+    if os.path.exists(USER_STYLE_FILE):
+        with open(USER_STYLE_FILE) as fp:
+            content += '\n' + fp.read() + '\n'
+    return content
 
 def show_html(md_view, preview):
     global windows_phantom_set

MarkdownLivePreview.tasks

@@ -1,21 +1,21 @@
 Fast:
-  ☐ sync scroll @needsUpdate(because of images)
   ☐ cache image in object when used, so that it's faster @needsTest
 
 Medium:
   ☐ auto refresh preview if loading images
   ☐ use alt attribute for 404 error
-  ☐ fix custom css @bug
 
 Long:
-  ☐ support hanchor (TOC) @big
+  ☐ support anchor (TOC) @big
 
 Unknown:
-  ☐ check how many times is the show_html function called
 
 
 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
 Archive:
+ ✔ 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)
  ✔ fix #4 @high @done Mon 09 Jan 2017 at 18:42 @project(Long)
  ✔ use MarkdownLivePreview syntax, so we can use syntax's settings @done Mon 09 Jan 2017 at 18:41 @project(Medium)
  ✔ add clear cache command @done Mon 09 Jan 2017 at 18:41 @project(Fast)

default.css

@@ -1,6 +1,8 @@
 html {
     --light-bg: color(var(--background) blend(#999 85%));
+    --very-light-bg: color(var(--background) blend(#999 92%));
 }
+
 body {
     padding:10px;
     padding-top: 0px;
@@ -38,12 +40,12 @@ pre code {
     padding-left: 0;
 }
 
+pre code .space {
+    color: var(--light-bg)
+}
+
 kbd {
-    padding: 0 .29412em;
-    border-radius: .2rem;
-    background-color: #f5f5f5;
-    color: #555;
-    box-shadow: 0 0.1rem 0 #b0b0b0;
-    word-break: break-word;
+    padding: 0 5px;
+    background-color: var(--very-light-bg);
     font-family: "Roboto Mono","Courier New",Courier,monospace;
 }

devListener.py

@@ -7,13 +7,13 @@ import os.path
 class MLPDevListener(sublime_plugin.EventListener):
 
     def on_post_save(self, view):
-        return
+        # return
         if not (os.path.dirname(__file__) in view.file_name() and
             view.file_name().endswith('.py')):
             return
         sublime.run_command('reload_plugin', {
-            'main': os.path.join(sublime.packages_path(),
-                                 'MarkdownLivePreview', 'md_in_popup.py'),
+            'main': os.path.join(sublime.packages_path(), 'MarkdownLivePreview',
+                                 'MarkdownLivePreview.py'),
             'scripts': ['image_manager', 'functions', 'MLPApi',
                         'setting_names'],
             'quiet': True

docs/index.md

@@ -59,7 +59,26 @@ As told in the introduction, MarkdownLivePreview is very easy to use:
 !!! tip
     [Markdown Extended][] is supported too!
 
-That's it.
+That's it. That's all you need to do to preview your markdown!
+
+### Custom CSS
+
+If you want to, you can add custom `CSS` to the MarkdownLivePreview's default stylesheet.
+
+Just search for `MarkdownLivePreview: Edit Custom CSS File` in the command palette
+(<kbd>ctrl+shift+p</kbd>). It will open a file in which you can add some CSS that will be *added* to
+the normal CSS.
+
+!!! bug
+    Comments in the CSS is interpreted weirdly by Sublime Text's phantoms. After a few tests, I
+    think that everything that is bellow a comment is ignored.
+
+    If you want to be sure that your CSS works, don't put any comments in it
+
+#### Share your tweaks!
+
+If you think that other users would enjoy your added CSS, then raise an issue, or PR the
+[GitHub repo][] to share your tweaks!
 
 ### Clearing the cache
 
@@ -115,7 +134,7 @@ Here's what I'd recommend (and use):
 }
 ```
 
-!!! note
+!!! tip
     On Windows at least, you can press <kbd>alt</kbd> to focus (so show) the menu, even if they're
     originally hidden
 
@@ -130,3 +149,4 @@ frameborder="0" scrolling="0" width="160px" height="30px"></iframe>!
 [pck-con]: https://packagecontrol.io
 [install-pck-con]: https://packagecontrol.io/installation
 [tweet]: https://twitter.com/_math2001
+[GitHub repo]: https://github.com/math2001/MarkdownLivePreview/issues

sample.md

@@ -4,8 +4,25 @@ Some `inline code` with *italic* and **bold** text.
 
 ```python
 import this
-if you('are', 'curious'):
+if you is moods.curious:
     print('then do it!')
 ```
 
 <kbd>ctrl+\`</kbd> or *View → Show Console* and paste `import this`!
+
+> Perfect programmers do NOT need comments.
+
+- to be efficient
+- you need
+- todos
+
+![Sublime Text Logo](https://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png)
+
+Some plugin I just *need*:
+
+- [PackageResourceReviewer](https://packagecontrol.io/packages/PackageResourceViewer)
+- [Boxy Theme](https://packagecontrol.io/packages/Boxy%20Theme)
+- [Markdown Preview](https://packagecontrol.io/packages/Markdown%20Preview)
+- [FileManager](https://packagecontrol.io/packages/FileManager)
+- [PlainTasks](https://packagecontrol.io/packages/PlainTasks)
+- [JSONComma](https://packagecontrol.io/packages/JSONComma)