> For the complete documentation index, see [llms.txt](https://solid.gitbook.io/solid-hacks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://solid.gitbook.io/solid-hacks/static-pages/creating-a-realtime-markdown-editor.md).

# Creating a Realtime Markdown Editor

### <img src="/files/-LO4Q4colzsEU5bq0Yz8" alt="" data-size="original">  <a href="#introduction" id="introduction"></a>

### Introduction <a href="#introduction" id="introduction"></a>

This hack again builds on the previous hack.

> <https://solid.gitbook.io/solid-hacks/section-1/hosting-a-web-page-on-your-pod>

This time we will create a realtime markdown editor.  This page is more complex and contains several files.  However there is a trick that will enable us to use the same one page pattern as before.  And that is to use the `<base>` tag.

### The Hack <a href="#the-hack" id="the-hack"></a>

Browse to your solid pod.  Within your `public` create a webpage called markdown.html with the databrowser.

Cut and paste the following file to your page.&#x20;

> <https://raw.githubusercontent.com/jbt/markdown-editor/master/index.html>

However we are going to add one additional line to mimic the base.  Beneath the HTML tag add.

`<base href="`[`https://jbt.github.io/markdown-editor/`](https://jbt.github.io/markdown-editor/)`">`

And we're done.  Congratulations, you have now made a useful app.  A realtime markdown editor!

### Demo <a href="#demo" id="demo"></a>

> <https://solidhacks.solid.community/public/demos/markdown.html>

### Exercises

As a step further try and create some of the markdown editors below.  See what issues come up.  Or try some other static apps.

### See Also

#### Realtime Markdown editors

> <https://github.com/joemccann/dillinger>
>
> <https://github.com/tylingsoft/markdown-plus>
>
> <https://github.com/jbt/markdown-editor>
>
> <https://github.com/benweet/stackedit>

#### Create a web page with Markdown

> <https://github.com/oscarmorrison/md-page>\
> \
> <https://casual-effects.com/markdeep/features.md.html>