[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',
+USER_STYLE_FILE = os.path.join(os.path.dirname(__folder__), 'User', 'MarkdownLivePreview.css')
-                            '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;
+    padding: 0 5px;
-    border-radius: .2rem;
+    background-color: var(--very-light-bg);
-    background-color: #f5f5f5;
-    color: #555;
-    box-shadow: 0 0.1rem 0 #b0b0b0;
-    word-break: break-word;
     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(),
+            'main': os.path.join(sublime.packages_path(), 'MarkdownLivePreview',
-                                 'MarkdownLivePreview', 'md_in_popup.py'),
+                                 'MarkdownLivePreview.py'),
             'scripts': ['image_manager', 'functions', 'MLPApi',
                         'setting_names'],
             'quiet': True

docs/imgs/MarkdownLivePreview-opposite.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 99.999996 100"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="MarkdownLivePreview.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2196f3"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="36.574985"
+     inkscape:cy="6.9424003"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showborder="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-349.87364,-434.14672)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:59.90521622px;font-family:Candal;-inkscape-font-specification:Candal;text-align:start;text-anchor:start;opacity:1;fill:#e1ecff;fill-opacity:1;stroke:#ef524f;stroke-width:3.75156426;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text7027"
+       transform="translate(-0.13506381,-12.064395)">
+      <path
+         d="m 352.04084,461.61747 12.16825,0 10.2962,16.08783 10.29621,-16.08783 12.46076,0 0,41.36034 -13.39678,0 0,-22.46445 -9.65269,16.35108 -2.83731,0 -9.97445,-16.35108 0,22.46445 -9.36019,0 0,-41.36034 z"
+         style="fill:#e1ecff;fill-opacity:1;stroke:none"
+         id="path7039"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       transform="matrix(-1,0,0,1,-0.13506381,-12.064395)"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:59.90521622px;font-family:Candal;-inkscape-font-specification:Candal;text-align:start;text-anchor:start;opacity:1;fill:#b9d5ff;fill-opacity:1;stroke:#ef524f;stroke-width:3.75156426;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text7031">
+      <path
+         d="m -447.97656,461.61747 12.16825,0 10.29621,16.08783 10.29621,-16.08783 12.46075,0 0,41.36034 -13.39677,0 0,-22.46445 -9.6527,16.35108 -2.8373,0 -9.97446,-16.35108 0,22.46445 -9.36019,0 0,-41.36034 z"
+         style="fill:#b9d5ff;fill-opacity:1;stroke:none"
+         id="path7036"
+         inkscape:connector-curvature="0" />
+    </g>
+    <path
+       style="opacity:0.75;fill:#cde0ff;fill-opacity:1;stroke:none;stroke-width:1.00199997;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 375.63144,496.36803 24.28571,14.02137 24.28572,-14.02137 14.46428,0 -38.75,22.37233 -38.75,-22.37233 z"
+       id="path7081"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

docs/imgs/MarkdownLivePreview.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 99.999996 100"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="MarkdownLivePreview.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="36.574985"
+     inkscape:cy="6.9424003"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showborder="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-349.87364,-434.14672)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:59.90521622px;font-family:Candal;-inkscape-font-specification:Candal;text-align:start;text-anchor:start;opacity:1;fill:#5599ff;fill-opacity:1;stroke:#ef524f;stroke-width:3.75156426;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text7027"
+       transform="translate(-0.13506381,-12.064395)">
+      <path
+         d="m 352.04084,461.61747 12.16825,0 10.2962,16.08783 10.29621,-16.08783 12.46076,0 0,41.36034 -13.39678,0 0,-22.46445 -9.65269,16.35108 -2.83731,0 -9.97445,-16.35108 0,22.46445 -9.36019,0 0,-41.36034 z"
+         style="fill:#5599ff;fill-opacity:1;stroke:none"
+         id="path7039"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       transform="matrix(-1,0,0,1,-0.13506381,-12.064395)"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:59.90521622px;font-family:Candal;-inkscape-font-specification:Candal;text-align:start;text-anchor:start;opacity:0.75;fill:#5599ff;fill-opacity:1;stroke:#ef524f;stroke-width:3.75156426;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text7031">
+      <path
+         d="m -447.97656,461.61747 12.16825,0 10.29621,16.08783 10.29621,-16.08783 12.46075,0 0,41.36034 -13.39677,0 0,-22.46445 -9.6527,16.35108 -2.8373,0 -9.97446,-16.35108 0,22.46445 -9.36019,0 0,-41.36034 z"
+         style="fill:#5599ff;fill-opacity:1;stroke:none"
+         id="path7036"
+         inkscape:connector-curvature="0" />
+    </g>
+    <path
+       style="opacity:0.75;fill:#aaccff;fill-opacity:1;stroke:none;stroke-width:1.00199997;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 375.63144,496.36803 24.28571,14.02137 24.28572,-14.02137 14.46428,0 -38.75,22.37233 -38.75,-22.37233 z"
+       id="path7081"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

docs/index.md

@@ -1,4 +1,7 @@
-Welcome to MarkdownLivePreview's documentation!
+# Welcome to MarkdownLivePreview's documentation!
+
+<img src="imgs/MarkdownLivePreview.svg" alt="MarkdownLivePreview's logo"
+     style="width: 400px; margin: auto; display: block;">
 
 MarkdownLivePreview is a [Sublime Text 3][st] plugin to preview your markdown as you type,
 *right in Sublime Text itself*, without *any* dependency!
@@ -56,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
 
@@ -112,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
 
@@ -125,5 +147,6 @@ frameborder="0" scrolling="0" width="160px" height="30px"></iframe>!
 [st]: https://sublimetext.com
 [Markdown Extended]: https://packagecontrol.io/packages/Markdown%20Extended
 [pck-con]: https://packagecontrol.io
-[pck-con-ins]: https://packagecontrol.io/installation
+[install-pck-con]: https://packagecontrol.io/installation
 [tweet]: https://twitter.com/_math2001
+[GitHub repo]: https://github.com/math2001/MarkdownLivePreview/issues

mkdocs.yml

@@ -24,6 +24,7 @@ markdown_extensions:
   - codehilite
 
 extra:
+  logo: imgs/MarkdownLivePreview-opposite.svg
   palette:
     primary: Blue
     accent: Indigo

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)