Advanced Markdown Editor

A good Hugo CMS requires a good Markdown editor. That’s why I’m plugging the Monaco Editor in Hokus. It’ll be one of the many available components to compose a user interface.

The Monaco Editor is the code editor that powers VS Code (my IDE of choice for many projects, including Hokus).

Bellow, a small snippet to include the editor into some Hokus UI (eg: for a collection of posts):

{
    "title": "Posts",
    "key": "post",
    "itemtitle": "Post",
    "path": "posts/"
    "fields": [
    ...
        {
            "key":"mainContent",
            type:"monaco-editor",
            "language":"markdown"
        },
    ...
    ]
}

I’ll have to include some UI elements to give hints to non-tech users about the Markdown syntax, but that’ll be the easy part.

This feature was not in my roadmap and it will take some time to include it, but I think it will worth the effort.

If you don’t know the Monaco Editor, check it out.


Screenshots

Update (2018-05-19): A first version of the component is ready.

In the following screenshot, you can see the new Monaco editor component:

Monaco Editor

Here is the same component, in fullscreen mode:

Monaco Editor in fullscreen


Update (2018-10-06)

Monaco Editor for Hokus is now deprecated. The Hokus offical code editor is now Ace.


Comments