plugin HTML+Markdown Live Preview

Post by **Alexey** » 23.05.2019 18:47

Plugin for CudaText.
Allows to use live preview of HTML and Markdown files in the browser, during editing, without need to reload browser page.
Requires Python 3, Flask framework and Markdown2 library.
Tested on Windows 10 and Linux (Ubuntu 19).

How to use
----------

- Install Python 3 from official site. With adding it to PATH variable.
- Install Flask in Python.
Run in terminal:
pip install flask
pip install markdown2
on Unix:
pip3 install flask
pip3 install markdown2

- In CudaText, specify path to browser: "Plugins / HTML Live Preview / Config".
For example: "chrome", "firefox", "opera" or full path to executable file.
Restart CudaText.

- In CudaText, call "Plugins / HTML Live Preview / Start server".
This should show terminal with running Flask server.
Browser should open at http://127.0.0.1:5000/view

After that, just edit some HTML file.
Server will detect your changes (after last editing, make small pause)
and browser should show the preview.

Lexer names handled: any with "HTML", "Jinja2" and "Markdown".

Note: on clicking any link in the browser, live preview stops, until you return to the
http://127.0.0.1:5000/view

Browsers
--------

Supported:
- Google Chrome
- Firefox
- Opera
- Microsoft Edge 42

Not supported:
- Internet Explorer

About
-----
Authors:
Medvosa, https://github.com/medvosa
Alexey Torgashin (CudaText)

Post by **kvichans** » 24.05.2019 11:34

Cool!

miro.matas · Post by **miro.matas** » 24.05.2019 12:44

really good! very good and usefull…

two questions

what's about integrate that preview window directly inside CudaText? I am not sure if it is technically possible… if not, we must to respect current limitations, sure…

will be possible to extend current Markdown Preview to that direction?

BTW - where is the right location for CSS on that server? (yes, it is question for someone elese… but maybe some smart people here know the answer… TIA)

Post by **Alexey** » 25.05.2019 09:19

Integrate into Cud - not possible, we need some kind of Chromium for this, and code which works with Chromium.
Make Markdown Preview in similar way - possible, if you give a donation, e.g. 20-30$. (Write in email about it, pls)

CSS location can be in dir of editor's file or sub-dir.

Post by **Alexey** » 26.05.2019 19:38

Plugin was reworked.
Now it supports Windows+Unixes (tested only on Ubuntu 19).

Post by **Alexey** » 07.06.2019 22:55

Plugin updated. It now supports Markdown preview too (requires "pip3 install markdown2").

lincpa · Post by **lincpa** » 13.10.2020 12:34

If Live preview in the sidebar, it is not only more convenient, but also more in line with the idiom of most editors.
just like:

geany plugin:
https://plugins.geany.org/markdown.html ( WebKit )

notepad++ plugin:
https://github.com/NotMad-Text-Editor-P ... rkdownText (Miniblink: a open source, one file, small browser widget base on chromium.)
https://github.com/nea/MarkdownViewerPlusPlus (.net)

Post by **Alexey** » 13.10.2020 16:39

We have no method to embed chromium (or other library) to Cud's panel (side or bottom). So it is the separate window.

lincpa · Post by **lincpa** » 13.06.2021 16:10

a open source Preview HTML plug-in for Notepad++ write by Delphi, https://fossil.2of4.net/npp_preview/home

It can customize commands to convert any data to html and preview it. RJ TextED 14.90 Beta support this feature.

Preview Screenshot of "Markdown Literate Programming" and "Clojure Hiccup (HTML DSL)": https://github.com/linpengcheng/ClojureBoxNpp

uvviewsoft · Post by **uvviewsoft** » 13.06.2021 17:04

this is not useful for CudaText. it is based on MSIE and not Chrome.