Page 1 of 2

plugin HTML+Markdown Live Preview

Posted: 23.05.2019 18:47
by Alexey
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)

Posted: 24.05.2019 11:34
by kvichans
Cool!

Posted: 24.05.2019 12:44
by miro.matas
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)

Posted: 25.05.2019 09:19
by Alexey
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.

Posted: 26.05.2019 19:38
by Alexey
Plugin was reworked.
Now it supports Windows+Unixes (tested only on Ubuntu 19).

Posted: 07.06.2019 22:55
by Alexey
Plugin updated. It now supports Markdown preview too (requires "pip3 install markdown2").

Posted: 13.10.2020 12:34
by lincpa
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)

Posted: 13.10.2020 16:39
by Alexey
We have no method to embed chromium (or other library) to Cud's panel (side or bottom). So it is the separate window.

Posted: 13.06.2021 16:10
by lincpa
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

Posted: 13.06.2021 17:04
by uvviewsoft
this is not useful for CudaText. it is based on MSIE and not Chrome.