
Strapdown.js – Instant and elegant Markdown documents - exolymph
http://strapdownjs.com/
======
spankalee
I think this kind of thing is a bit more straightforward with Web Components,
especially since the generated HTML can be rendered to Shadow DOM.

The PolymerElement project's <marked-element> has offered declarative client-
side Markdown for years:

    
    
        <marked-element>
          <!-- content is in a script tag so inline HTML isn't instantiated -->
          <script type="text/markdown">
            # Hello
          </script>
        </marked-element>
    

[https://www.webcomponents.org/element/PolymerElements/marked...](https://www.webcomponents.org/element/PolymerElements/marked-
element)

For math, you can do a similar thing with Katex:
[https://github.com/justinfagnani/katex-
elements](https://github.com/justinfagnani/katex-elements)

    
    
        <katex-display>c = \pm\sqrt{a^2 + b^2}</katex-display>

------
prideout
This is nice for iterating, but for an actual deployment it's not so nice for
three reasons:

    
    
        (1) Prevents outside navigation into named anchors.
        (2) Makes the content slow to load.
        (3) Suffers from a flash of unstyled content.
    

You can use chrome to bake out the HTML with a one-liner:

    
    
        chrome mydoc_md.html --headless --dump-dom --virtual-time-budget=1000 > mydoc.html
    

The resulting HTML is fast to load and just as beautiful.

~~~
goodells
This is awesome, I had no idea you could use Chrome to run a webpage with
JavaScript and dump its contents. Thanks for sharing!

------
messe
How is this remotely elegant? You're including a script to render simple
formatted text, something that can be accomplished by statically compiling
from markdown to HTML before serving.

If you can serve static HTML, why not just do that?

~~~
kjeetgill
It could be useful if you just want to edit a file in notepad and drop it on a
CDN or fileshare without any tooling. I don't run a blog but it could be nice.

I'd definitely call it elegant, though not exactly minimal.

I helped run a fraternity website for a bit. If I could say, hey just download
the source from chrome, tweak the bulletin in notepad, and upload it back to
the ftp page that would have been great.

It also has the text in readable markdown. If you browse without JS it still
works!

~~~
roryisok
> If you browse without JS it still works!

Also true of html

------
ronilan
This comes on top of Marked[1], so it is a dependency. Use with care.

From my experience any of the trio, Marked[1], Showdown[2] and Markdown-it[3],
can be configured to just do it themselves.

As a side note, I built a markdown editor once that works client side and
resides inside "real static" html.

Demo for the interested: [http://public.docs.xstatic.site.s3-website-us-
west-1.amazona...](http://public.docs.xstatic.site.s3-website-us-
west-1.amazonaws.com/__markdown.html)

[1] [https://github.com/markedjs/marked](https://github.com/markedjs/marked)

[2]
[https://github.com/showdownjs/showdown](https://github.com/showdownjs/showdown)

[3] [https://github.com/markdown-it/markdown-it](https://github.com/markdown-
it/markdown-it)

------
mpolichette
We used this for docs at a previous job... It was nice at the time... since
not a lot of tools supported markdown.

However, in hindsight it sucks... all that documentation is so much harder to
read in things like githublab... Those things render .md files just great,
however, all these old docs look like html and require JS to render...

Just write pure markdown in .md files... view them w/ tooling, don't build
tooling into the file...

------
Ezhik
Please don't make websites require JavaScript to display simple text.

~~~
crooked-v
I wish browsers would include a basic Markdown renderer.

~~~
kroltan
But not everyone likes Markdown, it would possibly be bloated!

Maybe we should add a scripting language so that sites can use any source
format they want? Oh wait.

~~~
erik_seaberg
Or we could build a big tool ecosystem around a single markup language that
everything understands.

------
DC-3
On my browser, this page flashes raw HTML before it displays the rendered page
- not a nice experience. I don't like the idea of this at all, anyway - surely
it's better to render content once rather than render it thousands or even
millions of times clientside?

~~~
spankalee
The flash could be avoided if the content were in a `<script>` or `<template>`
tag.

------
catchmeifyoucan
Strapdown isn't in active development. PRs haven't been merged in over a few
years.

Strapdown-Zeta (a fork) has the ability to load MD files from src and stuff:

[https://github.com/chaitin/strapdown-
zeta/blob/master/README...](https://github.com/chaitin/strapdown-
zeta/blob/master/README.md)

~~~
hammerha
Thanks for the comment!

FYI, if you want to src attribute to load markdown files you need to build js
files yourself as the js file in the CDN doesn't have the feature for some
reason.

I've created an issue for this [https://github.com/chaitin/strapdown-
zeta/issues/119](https://github.com/chaitin/strapdown-zeta/issues/119)

------
sudhirj
I don't see how this is SEO friendly, as claimed by the site. Is the idea that
because the text is already on the HTML isn't not a negative from an SEO point
of view?

------
PerryCox
I've been using this for about 2 years now for my own personal documentation.
Now I've switched over to using VS Code and it's Markdown Preview function but
if you want to quickly render Markdown as a webpage this is a great tool!

------
anchpop
I like this, but I hate the FOUT that it seems to create

~~~
Waterluvian
Off topic but I never knew the term for this. The cbcnews.ca site got rebuilt
in react recently and the result has this one bug where when loading, some
headlines flash an entirely different but also valid headline for the same
story for a split second. When it comes to news, a FOUT like that makes me
rather paranoid about maybe I'm getting a tailored headline for my
demographic.

~~~
cosmie
It's been really common for years to split test headlines[1] for content. Even
most email marketing platforms have a variation of it, where they stagger out
emails, sending out a few variations with different subject lines to a subset
of users first, identifying the one with highest engagement, then releasing
the email to the remainder/bulk of your email list using that subject.

I wouldn't put it past the major publishers to have moved beyond A/B testing
for an overall headline winner to more segmented optimization based on tying
A/B performance to first and third party data they have available on you, and
further optimizing their headlines to reflect whatever performed well for
traffic like you, rather than just performed best overall for all traffic.

1\. [https://contently.com/strategist/2015/02/04/how-
buzzfeed-r29...](https://contently.com/strategist/2015/02/04/how-
buzzfeed-r29-and-other-top-publishers-optimize-their-headlines-and-images/)

------
TheCoreh
Nice, but you should probably serve the script from a [https://](https://) URL

------
ksherlock
xmp tag? Never heard of it. MDN to the rescue!

Obsolete

This feature is obsolete. Although it may still work in some browsers, its use
is discouraged since it could be removed at any time. Try to avoid using it.

* It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from the language in HTML5.

* Use the <pre> element or, if semantically adequate, the <code> element instead. Note that you will need to escape the '<' character as '&lt;' to make sure it is not interpreted as markup.

* A monospaced font can also be obtained on any element, by applying an adequate CSS style using monospace as the generic-font value for the font-family property.

~~~
cyberferret
I may be totally off track here, but I am thinking that the <xmp> tag is only
used for the parser to identify which theme the author wants to use? I am
assuming that the end HTML just strips out the xmp tag and inserts the
relevant bootstrap CSS/JS links in there to match the theme, so the actual xmp
tag is never passed across to the browser?

~~~
WorldMaker
Presumably it was chosen because it also allows the author to include HTML
tags inside Markdown (somewhat common in Markdown usage) with the browser
(mostly) ignoring them. It's part of why many other options using <script
type='text/markdown'>, though at least in SCRIPT's case it hasn't been
deprecated since HTML 3.2.

------
utopcell
Neat looking. This may be useful for search discoverability also. Not all
engines enable javascript and for the ones they do, it is probably not enabled
for all pages, so they'll end up parsing "clean" markdown.

------
antman
I like markdeep.js [https://casual-
effects.com/markdeep/features.md.html](https://casual-
effects.com/markdeep/features.md.html)

