Simple Markdown Editor made with Python Tkinter
To Develop a Markdown Editor guided by the following Principles :
- Minimal Traditional Functionality
- Non-Native UX Patterns
- KISS (Keep it simple and stupid)
Almost every text editor presents the user with vast number of styling choices and fancy features. It lets user to lose balance between productivity and decent styling. Markdown language mitigates the problem of decent styling, but most of the markdown editors are feature rich or heavy and distracts the user. This project is motivated to address this issue by providing a markdown editor with minimal functionality and non-distracting environment. it implements auto save functionality, so the user focuses only on creating content. The user is presented with recently edited files making it quicker to switch between files. it also avoids native menu bar in favour of tabs so that the user is presented with minimum number of options.
-
Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like
#
or*
. -
- The overriding design goal for Markdownβs formatting syntax is to make it as readable as possible.
- Markdownβs simplicity and flexibility helps you make fewer mistakes, and errors are much easier to find.
- Markdown can be written anywhere thereβs a blinking cursor and shared in any format. Itβs just plain text. You donβt need any WYSIWYG controls, because the Markdown characters actually look like the formatted results youβll get.
-
Tab Layout
π Selected Tab's Page β π₯ π - π - Select Folder
- β - Edit Markdown
- π₯ - Edit Markdown and Markdown Preview side by side
- π - Markdown Preview
- Cut, Copy, Paste between
clipboard
and theEditable Text Area
- Delete all, Select All, Undo, Redo
- Keyboard shortcuts for the above two
- Preview Markdown
- Auto save
- Recent Files
- Edit and Preview side by side
- Default dark theme
- on opening litEditor, the user is presented with a Window with tabs (π, β, π₯, π)
- β,π₯ & π will be disabled
- π will be selected
- after user selects a file in π.The disabled tabs(β,π₯ & π) will become active
- user edits the markdown in either β or in one of the sides of π₯
- the edit is reflected in the preview(π₯ or π) live
- changes are saved as the user is editing
- if the user were to switch to π, then continue from step 4.
-
Changes in state and effects of those changes are separated into different places for maintainability, and these are stream of changes. (ex - editing text in
β or π₯ - Markdown Editor
must be reflected inπ₯, π - Markdown View
andauto saving system
). We need a mechanism to effectively communicate and handle these changes. -
We are going to follow the
Observer Pattern β‘
. Tkinter providesStringVar
that can be used to implement this pattern.
-
main.py
is the entry point of the applicationlit_editor
function declares the initial state of the applicationlit_editor
instantiatesStringVar
'slogic
functions are called which reacts to the changes of theStringVar
'sother UIs
are built passing their requiredStringVar
'sother UIs
are placed according to layout
-
- the
StringVar
's passed fromlit_editor
help in communication UI
updates those observablesUI
&Logic
observes those updates and acts accordingly
- the
-
- A fast and complete Python implementation of Markdown.
- we use it to convert Markdown texts into HTML string.
-
- This module is a collection of tkinter widgets whose text can be set in HTML format. A HTML widget isn't a web browser frame, it's only a simple and lightweight HTML parser that formats the tags used by the tkinter Text base class.
- we use this module to display the html generated by
markdown2
-
- The Python Imaging Library adds image processing capabilities to your Python interpreter.
- This library provides extensive file format support, an efficient internal representation, and fairly powerful image processing capabilities.
- The core image library is designed for fast access to data stored in a few basic pixel formats. It should provide a solid foundation for a general image processing tool.
- we use this module for displaying icon
First Experience
Returning User Experience
Editing Markdown
Previewing Markdown
Editing and Previewing side by side
>= python 3.7
- dependencies in
requirements.txt
file git
git clone https://github.com/Pushpavel/litEditor.git
- install required dependencies
python main.py