I use Jekyll for my Website on GitHub Pages. It is super easy to use and allows me to write posts anywhere in the world. I use Windows for my Home PC and my travelling laptop, which happens to be the only two places I actually write posts.
Up until today, I have used Visual Studio Code for writing my posts direct in the .md file that gets converted to a static .html file. This hasn’t been an issue except for the fact it doesn’t have spell checking and my spelling is horrendous. I looked around and there are many different Markdown Editors that I could use, but I wanted the Preview Pane to be identical to my site. This meant that I could use my class attributes for any images or tables and see what they’d look like in real time, unfortunately I couldn’t find an editor that would allow me to do this. I had a few different requirements when I set off on creating this project
- It must allow me to paste images into the Markdown Editor, that then creates the image in the correct location
- It must allow me to save drafts
- It must allow me to publish (straight to _posts)
- It must have a spell checker
- It must allow me to configure the required Front Matter
- It must have a preview pane that is 1-1 to my website
After a bit of searching I couldn’t find one, so I made one.
The template that is used for the preview was just a blog post that contained placeholder information that was ran through Jekyll and generated an ‘empty’ post for me, which I then edited to rename the placeholders that the tool then fills. There is then a configuration section that allows me to pre-configure certain things that are used, such as image saving location, root project location, drafts, posts and theme (CSS) files if the preview template somehow disappears into oblivion.
One of the big benefits of having a 1-1 copy of the post page in the Preview Pane is that it allows me to check what the post will look like on different screen sizes as I’m typing it out which will allow me to resize images, tables, etc. if required.
There is a full issues that I still need to resolve, and ideally in the future I’ll have an option to insert tables that lets me create them here without having to copy and paste from the Table Generator but this is version 1 and it’s still early days. Certain things are still hard-coded that I’d like to change, such as what classes, if any, get applied to an image once it gets pasted into the Markdown Editor window.
The spell checker allows me to ignore misspellings as well as add words to a local dictionary file, so words that are correct but don’t exist in the dictionary won’t have a red squiggly line under them constantly.
The features that haven’t been added yet but I wish to add are:
- Insert table with custom class attributes
- Open existing post (currently have to copy and paste it)
- Edit image alt text on copy and paste
- Class attributes for images, tables, etc. will be under Settings rather than hard-coded.
If anyone is interested in contributing, or even just using this ping me a message - my contact links are on the homepage.
xx