I just wanna share with you a test I did few days ago.
There are a lot of Markdown editors on the market (and some of them are expensive).
Why not try to do one by yourself ?
This experiment will show you that it's pretty easy to do.
Introduction
Python is often the weapon of choice when you want to build a little
crossplatform tool. Here I will use 2 well known Python librairies :
- Pyside for the GUI (Pyside is the official QT wrapper)
- Markdown2 for markdown conversion
Of, course, you will not get a "professional" editor at the end of this article
but I hope this will be a good enough proof of concept to start your own.
Last, the source code on GitHub for an easier access :
https://github.com/MeyerDumont/markdown-editor
Let's go !
1. Download Pyside
This is generally a two step process
- install qt librairies
- install the python wrapper
Please follow the exact instructions for your system here :
http://qt-project.org/wiki/Get-PySide
2. Download Markdown2
To install it in your Python installation run one of the following:
- pip install markdown2
- pypm install markdown2 # if you use ActivePython
- easy_install markdown2 # if this is the best you have
- python setup.py install
For more information, please go here :
https://github.com/trentm/python-markdown2
4. Let's code (Code Explanation)
We want to have 2 panels, a text editor on the left and a web browser on the right. In QT terms, we need a QSplitter with a QTextEdit on the left and a QWebView on the right :
self.editor = QTextEdit(self)
self.web = QWebView()
splitter = QSplitter(Qt.Horizontal) splitter.addWidget(self.editor) splitter.addWidget(self.web)
We also need to be notified when the text editor content changes. This is easy with the textChanged signal (=callback) our onTextChanged method will be called :
self.editor.textChanged.connect(self.onTextChanged)The last thing to do is to get the content of the text editor, convert it to html
try: html = markdown2.markdown(self.my_editor.toPlainText()) except: html = 'Error decoding '
and send the result to the browser :
self.web.setHtml(html)
That's all folks , here is the entire source code and a video to show you the result
import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtWebKit import *
from PySide.QtNetwork import *
import markdown2
class MarkdownEditor(QWidget):
def __init__(self):
super(MarkdownEditor, self).__init__()
self.initUI()
def initUI(self):
hbox = QHBoxLayout(self)
self.editor = QTextEdit(self)
self.editor.setFrameShape(QFrame.StyledPanel)
self.editor.textChanged.connect(self.onTextChanged)
self.web = QWebView()
self.web.setHtml("start typing on the left pane")
splitter = QSplitter(Qt.Horizontal)
splitter.addWidget(self.editor)
splitter.addWidget(self.web)
hbox.addWidget(splitter)
self.setLayout(hbox)
QApplication.setStyle(QStyleFactory.create('Cleanlooks'))
self.setGeometry(300, 300, 800, 400)
self.setWindowTitle('MarkdownEditor')
self.show()
def onTextChanged(self):
try:
html = markdown2.markdown(self.editor.toPlainText())
except:
html = 'Error decoding '
self.web.setHtml(html)
def main():
app = QApplication(sys.argv)
ex = MarkdownEditor()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
I hope it helps
Meyer
