To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 40 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1
👀 Reading hidden code
Enter cell code...
66.6 μs

Hello!

This is Markdown but supercharged!! Inline HTML supported!

Here is a list, created using simple string interpolation:

  • item 1
  • item 2
  • item 3

Another list, interpolated as HTML:

  • item 1
  • item 2
  • item 3

Hello world

1+1

Intepolating a plotly plot

It works!

24681000.20.40.6

Code block

function f(x::Int64)
	"hello $(x)"
end


# we can interpolate into code blocks!
xs = [1:10..., 20]
map(xs) do x
	f(x^2)
end
@md("""
# Hello!
This is *Markdown* but **supercharged**!!
<marquee style=$((color="purple", font_family="cursive"))>Inline HTML supported!</marquee>

Here is a list, created using simple string interpolation:
$((
"- item $i\n" for i in 1:3
))

Another list, interpolated as HTML:
<ul>
$((
@htl("<li>item $i</li>") for i in 1:3
))
</ul>

![](https://media.giphy.com/media/JmUfwENE6i4Jxig27n/giphy.gif)

Hello ``world``

```math
\\sqrt{1+1}
```

## Intepolating a plotly plot
It works!
$(plot(1:10, rand(10)))

## Code block
```julia
function f(x::Int64)
"hello \$(x)"
end


# we can interpolate into code blocks!
$(code_snippet)
```
""")
👀 Reading hidden code
1.5 s

Hello world

1+1
cm"""
Hello ``world``

```math
\sqrt{1+1}
```
"""
👀 Reading hidden code
2.5 s

Hello!

This is Markdown but supercharged!!

@md("""
# Hello!
This is *Markdown* but **supercharged**!!
""")
👀 Reading hidden code
4.2 ms
import PlutoUI
👀 Reading hidden code
192 ms
  • item 1
  • item 2
  • item 3
@md("""
<ul>
$((
@htl("<li>item $i</li>") for i in 1:3
))
</ul>
""")
👀 Reading hidden code
26.0 ms
"xs = [1:10..., 20]\nmap(xs) do x\n\tf(x^2)\nend\n"
code_snippet = """
xs = [1:10..., 20]
map(xs) do x
f(x^2)
end
"""
👀 Reading hidden code
10.8 μs
plot (generic function with 1 method)
plot(x, y) = @htl("""
<script src="https://cdn.plot.ly/plotly-1.58.0.min.js"></script>

<script>
const container = html`<div style="width: 100%;"></div>`

Plotly.newPlot( container, [{
x: $(x),
y: $(y),
}], {
margin: { t: 0, b:0, l: 0, r:0 } ,
height: 100,
})

return container
</script>
""")
👀 Reading hidden code
492 ms

How it works

Use HTL to do the string macro magic, and then ask CommonMark.jl to render it. That's it!

👀 Reading hidden code
247 μs
using HypertextLiteral
👀 Reading hidden code
3.8 ms
using CommonMark
👀 Reading hidden code
59.7 ms
@md (macro with 1 method)
macro md(expr)
cm_parser = CommonMark.Parser()
enable!(cm_parser, MathRule())
quote
result = @htl($expr)
htl_output = repr(MIME"text/html"(), result)

$(cm_parser)(htl_output)
end
end
👀 Reading hidden code
786 μs

Stress test

👀 Reading hidden code
164 μs
Hello$world
@htl("""
Hello\$world
""")
👀 Reading hidden code
51.5 μs

Hello$world

@md("""
Hello\$world
""")
👀 Reading hidden code
9.2 ms
👀 Reading hidden code
66.9 μs
helo *world*
@htl("""
<div>helo *world*</div>
""")
👀 Reading hidden code
50.4 μs
helo *world*
@md("""
<div>helo *world*</div>
""")
👀 Reading hidden code
196 μs
👀 Reading hidden code
66.2 μs
"asdf & 1 &amp;"
difficult = "asdf & 1 &amp;"
👀 Reading hidden code
10.2 μs

👀 Reading hidden code
65.0 μs

hello asdf & 1 &amp;

hello

123

x1

x2

x3

x4

x5

x6

x7

x8

x9

x10

@md("""
hello $(difficult)

hello $(@md("""
123 $([
@md("x$i") for i in 1:10
])
"""))
""")
👀 Reading hidden code
201 ms

👀 Reading hidden code
65.1 μs

👀 Reading hidden code
65.3 μs

👀 Reading hidden code
65.2 μs

asdf

h1 = @md("""
<h1>asdf</h1>
""")
👀 Reading hidden code
281 μs
true
showable(MIME"text/html"(), h1)
👀 Reading hidden code
2.7 ms

👀 Reading hidden code
64.8 μs
Error message

Multiple expressions in one cell.

How would you like to fix it?

cm"""
hello $(difficult)

hello $(cm"""
123 $([
cm"x$i" for i in 1:10
])
""")
"""
👀 Reading hidden code
---
👀 Reading hidden code
69.3 μs
Hello *world* 12
@htl("""
Hello *$("world")*

<script>
let x = 1 *2* 3
x += 1 *$(1 + 1)* 3
return html`<code>\${x}</code>`
</script>
""")
👀 Reading hidden code
9.2 ms

Hello world

12
@md("""
Hello *$("world")*

<script>
let x = 1 *2* 3
x += 1 *$(1 + 1)* 3
return html`<code>\${x}</code>`
</script>
""")
👀 Reading hidden code
13.1 ms
👀 Reading hidden code
81.7 μs

You can use <div> and </div> to create a div.

cm"""
You can use `<div>` and `</div>` to create a div.
"""
👀 Reading hidden code
93.1 ms

You can use <div> and </div> to create a div.

@md("""
You can use `<div>` and `</div>` to create a div.
""")
👀 Reading hidden code
242 μs

You can use <div> to create a div.

Close it with </div>!

@md("""
You can use `<div>` to create a div.

Close it with `</div>`!
""")
👀 Reading hidden code
250 μs

You can use <div style='color: red;'> to create a red div.

@md("""
You can use `<div style=$((color="red",))>` to create a red div.
""")
👀 Reading hidden code
20.2 ms
You can use `
` and `
` to create a div.
@htl("""
You can use `<div>` and `</div>` to create a div.
""")
👀 Reading hidden code
248 ms
👀 Reading hidden code
81.6 μs

👀 Reading hidden code
80.3 μs

👀 Reading hidden code
68.0 μs