Feature request: deep links

when articles/docs/code gets long, and you’re talking about it with other people, it’s nice to be able to provide a deep link direct to a part of the article or code. might be a nice feature for a notebook? something like this https://github.com/argyleink/blingblingjs/blob/master/src/index.js#L26

hmm, i bet if i provided my notebook html with an ID, i could make my own deep links… but i’d only get headers and stuff. pointing to code lines is harder.

2 Likes

This feature was added not to long ago. See:

4 Likes

sure enough! and it works great :grinning:
p.s. love that the changelogs are notebooks :+1:

2 Likes

This may be off topic for this thread, but what about linking to markdown headings? Do we need to explicitly save the markdown to a variable to be able to link to them?

Apparently not, Observable already creates IDs for headings. I noticed that while creating this example that shows how to automatically create IDs from tagged template literals. Edit: Brain fart, see other post.

@mbostock The slug for that notebook is weirdly off. Not sure if it’s caused by the nested span. Also, nested elements seem to mess with the slug generation for heading IDs (see the h1 e.g., it only contains the generic prefix).

In your example, neither of the markdown heading IDs work as link targets; try https://beta.observablehq.com/@mootari/anchor-anchors-in-markdown#anchors-in-markdown and https://beta.observablehq.com/@mootari/anchor-anchors-in-markdown#before-headline.

Here’s my attempt at explaining what’s going on; anyone with a better understanding should feel free to jump in and correct me:

If you peek at the source of an Observable notebook, you’ll see that user code and content is running from a sandboxed iframe; there is also an associated div in the original page (with class “absolute w-100 black pen”) which contains divs (with class “relative”) for each of the cells.

Links to the IDs created in your notebook don’t work because those IDs label stuff inside the iframe. On the other hand, links to explicitly named cells work fine because named cells get IDs in the cell divs, and these live in the original page.

You can’t link to Markdown headings directly; you can only link to named cells. For example:

foo = md`# Hed

Graf graf graf graf graf.`

The anchor fragment for this cell would be #foo (not #hed) because foo is the name of the cell.

1 Like

yeah, just name your html or md section cell you want to ‘deep link’ to and you can reference it like so:

Funny thing: I already know that, but after a long hot day it had somehow escaped my mind. Sorry for the noise.

Hmmm… I must be doing something wrong here.

Just using md # Credits does create <h1 id="credits" but https://observablehq.com/@martien/magic-balls-factory#credits does not work.

Naming the cell does work: credits = md# Credits.

Mike’s note in Feature request: deep links still holds - naming cells lets you link to them, using Markdown headers does not, because notebooks are in sandboxed iframes.