Show HN: Mdxish – Write high-quality, interactive blog posts in Markdown, live

[jasonjmcghee]

https://github.com/jasonjmcghee/mdxish

Hi HN!

I wanted an easier way to write technical interactive blog posts. So I built `mdxish`!

You can write in markdown, mixing classic markdown, html, and javascript together, and see the output html live as you author it.

Writing it in this way creates a really nice medium for the source (easy to read), which is just markdown mixed with code blocks. Also, many IDEs have support for syntax highlighting and intellisense / autocomplete features inside these code blocks.

And because `marked` (one of the only dependencies, but does near all of the heavy lifting) works client side, we can even render markdown directly to html on the client side.

For example, I created a gist of my falling sand blog post, rewritten in mdxish format: https://gist.github.com/jasonjmcghee/cba64163600fa90a3ea5d2e...

(also threw in the css it used as other files in that gist)

And now you or I or anyone can just replace "gist.github" with "mdxish". https://mdxish.com/jasonjmcghee/cba64163600fa90a3ea5d2ea099f...

And after a slight delay, you get the full rendered post- and the author only needs to upload to gist.

`mdxish` itself can do this client approach, the live server, or just one-off mdxish flavored md to html.

In the live mode, you can store state that persists across updates, like "time" (very useful for iterating on animations).

Anyway, hope others find this interesting / useful. If you'd like to contribute, please let me know!

Try it out and tell me what you think.

I've created a repo for doing GitHub Actions, the idea being, you should be able to just create a repo of mdxish flavored markdown and it'll take care of making it a full site for you. But not quite done with that yet!

Note: I also added a short video with a voice-over if you'd like to see it in action.

[KomoD]

> Put a mdxish flavored markdown file called index.md in a gist, copy the gist id, and go to https://mdx.com/{gistId}

^ README

Think you meant for this to be mdxish.com

[jasonjmcghee → KomoD]

Thanks! Fixed

[rustystump]

I dig this. I use mdx which I like but it doesn't play well with nextjs which I don't like.

Is there a way to try this out outside of mdxish.com? How would library imports work?

[jasonjmcghee → rustystump]

Absolutely!

In the repo I included a video where I do exactly that - you can either run a local live server that keeps the output html up to date, or you can do a one-off conversion (a command for each).

To import a whole script / library, you can either include it in `scripts` in the configuration at the top, or use a script tag like `<script src="mylib.js"></script>` or similar.

To import specific things from a script with exports you just:

    ```javascript
    // @run type="module"
    import { foo } from "./foo.js";
    console.log(foo);
    ```

The @run comment accepts any number of attributes after `// @run` which will be set on the script node.

or you can always eject and use inline html if needed.

    <script type="module">
        import { foo } from "./foo.js";
        console.log(foo);
    </script>

The drawback is markdown editors, previews, etc. tend to play much more nicely with markdown code blocks.

If you decide (or need to) use `type="module"` each script / block is isolated apart from `window`.

[rustystump → jasonjmcghee]

awesome thanks!