Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Markdown in Elm: is it [markdown| or [markdown |?

Tags:

markdown

elm

Here is my code snippet: http://www.share-elm.com/sprout/53d242e2e4b07afa6f9834a2 inspired by elm-lang.org's example.

main : Element
main = flow down
  [ [markdown| #Hello World |]
  , [markdown| The quick **brown** box *jumps* over the lazy dogs. |]
  ]

I am familiar with markdown itself, as on Daring Fireball or StackOverflow itself. However, I have several questions about how Markdown is used from within Elm. I could not find the documentation for Elm's

  • What does [markdown| mean? Why is [markdown | - notice the space - not acceptable?
  • Why does #Hello World not appear big? It should appear large like this

Hello World


Here's is a corrected example, but I don't know what I did right.

main : Element
main = flow down
  [ [markdown|
  
# Hello World 
  
  |]
  , [markdown| The quick **brown** box *jumps* over the lazy dogs. |]
  ]

Using strings seems to also be wrong, as in [markdown| "# Hello World" |]. Why is this wrong?

I thought it would be safer to remind Elm that my sentence was a string, but it seems I don't have to. And shouldn't.

like image 981
john mangual Avatar asked Dec 30 '25 17:12

john mangual


1 Answers

As mentioned in the comments [| and |] is syntax that was borrowed from Haskell. These are called quasiquotes and take a literal name between the first [ and |. Elm currently support markdown through this mechanism, and GLSL for the WebGL library.
I think the original announcement is the only documentation for now, we should definitely ask for the Syntax reference page to include how to use markdown.

As for your example use: The problem with the header "Hello World" does not come from the single-line use, but from the leading space. This code gives the desired behaviour:

main : Element
main = flow down
  [ [markdown|#Hello World|]
  , [markdown|The quick **brown** box *jumps* over the lazy dogs.|]
  ]

This is normal behaviour for markdown IIRC:

#Hello World
(^ has a leading space)

like image 112
Apanatshka Avatar answered Jan 04 '26 08:01

Apanatshka



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!