Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| bc328642e7 | |||
| d2053be41e | |||
| eb48b1c79f | |||
| 8317fa738c | |||
| 3be12b0539 | |||
| c92d78fb20 |
@ -8,5 +8,9 @@
|
||||
// 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
|
||||
"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"
|
||||
}
|
||||
|
||||
@ -48,8 +48,12 @@ def get_style():
|
||||
return content
|
||||
|
||||
def markdown2html(md, basepath):
|
||||
# removes/format the header.
|
||||
md = manage_header(md, get_settings().get('header_action'))
|
||||
|
||||
html = '<style>\n{}\n</style>\n'.format(get_style())
|
||||
|
||||
|
||||
# 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', 'no-code-highlighting', 'tables'])
|
||||
@ -77,7 +81,9 @@ def markdown2html(md, basepath):
|
||||
html = replace_img_src_base64(html, basepath=os.path.dirname(basepath))
|
||||
|
||||
# BeautifulSoup uses the <br/> but the sublime phantoms do not support them...
|
||||
html = html.replace('<br/>', '<br />')
|
||||
html = html.replace('<br/>', '<br />').replace('<hr/>', '<hr />')
|
||||
|
||||
sublime.set_clipboard(html) # print
|
||||
|
||||
return html
|
||||
|
||||
|
||||
79
README.md
79
README.md
@ -4,8 +4,7 @@ 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
|
||||
|
||||
@ -18,7 +17,7 @@ MarkdownLivePreview is available on the default channel of
|
||||
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.
|
||||
[thank package control](https://packagecontrol.io/say_thanks) for this. :wink:
|
||||
|
||||
### Usage
|
||||
|
||||
@ -33,84 +32,12 @@ 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*
|
||||
|
||||
### 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:
|
||||
|
||||

|
||||
|
||||
*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
|
||||
|
||||

|
||||
|
||||
### Custom css
|
||||
|
||||
It is possible to set your own css. But, be carefull, you have to respect
|
||||
[those rules][st-css-rules]. 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
|
||||
|
||||
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
@ -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,9 +156,13 @@ 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][]):
|
||||
|
||||

|
||||
|
||||
!!! 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!
|
||||
@ -150,3 +176,9 @@ frameborder="0" scrolling="0" style="width: 120px; height: 30px; vertical-align:
|
||||
[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
|
||||
|
||||
21
functions.py
21
functions.py
@ -11,12 +11,25 @@ def plugin_loaded():
|
||||
loading = sublime.load_resource('Packages/MarkdownLivePreview/loading.txt')
|
||||
error404 = sublime.load_resource('Packages/MarkdownLivePreview/404.txt')
|
||||
|
||||
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()
|
||||
@ -26,7 +39,7 @@ def get_preview_name(md_view):
|
||||
return name + ' - Preview'
|
||||
|
||||
def replace_img_src_base64(html, basepath):
|
||||
soup = BeautifulSoup(html)
|
||||
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/'):
|
||||
@ -34,7 +47,7 @@ def replace_img_src_base64(html, basepath):
|
||||
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, src))
|
||||
image = to_base64(os.path.join(basepath, img['src']))
|
||||
|
||||
img['src'] = image
|
||||
|
||||
@ -92,9 +105,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)
|
||||
soup = BeautifulSoup(html, 'html.parser')
|
||||
for pre in soup.find_all('pre'):
|
||||
code = pre.find('code')
|
||||
code.replaceWith(BeautifulSoup(''.join(str(node) for node in pre.contents) \
|
||||
.replace('\n', '<br/>').replace(' ', '<i class="space">.</i>'), 'html.parser'))
|
||||
.replace('\n', '<br/>').replace(' ', '<i class="space">.</i>'), 'html.parser'))
|
||||
return str(soup)
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
10
messages/2.4.txt
Normal file
10
messages/2.4.txt
Normal file
@ -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'
|
||||
Reference in New Issue
Block a user