🏠 back to Observable

¯\_(ツ)_/¯


#1

Backslashes incoherence in md?
See https://observablehq.com/d/0fda090b1854d115 for the issue.


#2

It’s certainly unwieldy, but there is a reason for it.

In markdown, both backslashes and underscores have to be escaped by backslashes. (md relies on marked for its implementation, and marked follows this part of the markdown spec). So to get \_ in markdown, you have to type \\\_.

In your notebook, md is applied to a JS template literal, where backslashes have to be escaped with backslashes – the result is that instead of 3 required backslashes, 6 are required.


#3

Well explained for the md part. But most of the headers are probably over-escaped:

  • <title> shows 6 \\\\\\ in the browser window title.
  • <og:title> shows a lot of them too (too many according to opengraphcheck)
  • <meta name="description" has only one (as plain text) :+1:
  • <script type="application/ld+json"> has too many (according to google debug).

#4

We currently pull the title from the source, not from the runtime value, hence the additional backslashes. That’s also why if you have a notebook like

md`Hello, ${subject}!`
subject = "World"

the extracted title is

Hello, ${subject}!

not

Hello, World!

We’ve considered using the runtime (computed) value instead for the title, but this would require defining when the value should be captured (since if we use the runtime value, the title can change dynamically even if the source code hasn’t changed, and we must wait for the value to resolve).

We’re alternatively considering allowing you to specify the title explicitly as metadata, rather than only extracting it from the source (or runtime) values.


#5

Good news! We just shipped runtime title evaluation. So, what you see should always be what you get (in the title, notebook listings, and the notebook’s published URL)—even if your title has embedded expressions.

The extra nice thing about this feature is that the title extraction is more robust. It’ll work if you have a kicker:

md`### This is a kicker.
# And this is the title.`

And it’ll work if you use an HTML tagged template literal, or anything else that generates an H1 element.

html`<h1>¯\\_(ツ)_/¯</h1>`

Or even:

html`<h1>${String.raw`¯\_(ツ)_/¯`}`

Or:

md`# ${DOM.text(String.raw`¯\_(ツ)_/¯`)}`