We then define the updateText helper method that updates the content of placeholder with the HTML that the JavaScript method marked() returns.įinally, we set up the web channel to access the content proxy object and make sure that updateText() is called whenever content.text changes. In the element we first define a placeholder element, and make it available as a JavaScript variable. marked.js is a markdown parser and compiler designed for speed written by Christopher Jeffrey and qwebchannel.js is part of the QWebChannel module. markdown.css is a markdown-friendly stylesheet created by Kevin Burke. In the index.html, we load a custom stylesheet and two JavaScript libraries. Var placeholder = document.getElementById('placeholder') This is done by using a dedicated Document class that exposes the document text as a Q_PROPERTY: Markdown Editor is an editor for markdown language (a lite markup language with plain text formatting syntax). Exposing Document Textīecause we expose the current Markdown text to be rendered to the web engine through QWebChannel, we need to somehow make the current text available through the Qt metatype system. For more information, visit Building and Running an Example. To run the example from Qt Creator, open the Welcome mode and select the example from Examples. The preview is updated from the editor through QWebChannel. To render the text, the Markdown text is converted to HTML format with the help of a JavaScript library inside the web engine. The document is rendered as rich text in the preview area, which is implemented by using QWebEngineView. The editor supports the Markdown syntax and is implemented by using QPlainTextEdit.

The Markdown Editor main window is split into an editor and a preview area. Some services, such as github, acknowledge the format, and render the content as rich text when viewed in a browser. Markdown is a lightweight markup language with a plain text formatting syntax.

For example, here are bolded text, italicized text, monospace, and a numbered. Markdown Editor demonstrates how to use QWebChannel and JavaScript libraries to provide a rich text preview tool for a custom markup language. This page shows markdown formatting examples and allows you to easily experiment.

Markdown editor