🏠 back to Observable

Feature request: deep links


#1

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

This feature was added not to long ago. See:


#3

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


#4

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?


#5

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.

@mike 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).


#6

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.


#7

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.


#8

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


#9

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