Link to section in notebook #1844
-
|
Is there a way to do this for hosted notebooks? For example, I would like to link to the section header "3. Generate the report ✏️" in this notebook. Trying something like: or doesn't seem to work for me, but I guess that is because there is no div id here, except for in
No idea how that works though! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
I don't think this is possible without some sort of special implementation on Pluto's side. The A very dirty way to fix this would be to place this code snippet at the end of the HTML <script>
window.addEventListener('load', () => {
setTimeout(() => {
if(window.location.hash) {
const scrollToId = window.location.hash.slice(1);
const scrollToEl = document.getElementById(scrollToId);
if(scrollToEl) {
scrollToEl.scrollIntoView({block: 'start'});
}
}
}, 100);
});
</script>All this does is wait 100 milliseconds so that hopefully the page is loaded by then, and then searches the DOM for an element which has the ID provided in the location hash (which is what the |
Beta Was this translation helpful? Give feedback.
-
|
Ah, I see. Thanks for such a clear explanation and potential workarounds @ctrekker! |
Beta Was this translation helpful? Give feedback.
-
|
This is actually a feature of https://github.com/JuliaPluto/MarkdownLiteral.jl! It automatically generates IDs for all headers, and you can link to IDs with the E.g. # ╔═╡ 2cb491d7-6b33-424c-83de-cce087a904a8
import MarkdownLiteral: @mdx
# ╔═╡ 2db953ae-b4d9-49cf-8b24-58425a71f5b7
@mdx "Take a look at [the next section](#setting-up-the-game-pieces)"
# ╔═╡ 95fbd0d2-a2b9-11ea-0682-fdf783251797
@mdx """
## Setting up the game pieces
What does a Julia implementation look like? We're not really interested in writing code that will manipulate physical disks. lkajsdlkjsdlkfj
"""Schermopname.2022-01-25.om.18.21.15.mov |
Beta Was this translation helpful? Give feedback.
-
|
But it would be nice to have an easy way to know the ID without guessing or opening the web dev tools! |
Beta Was this translation helpful? Give feedback.
-
|
Oh what the heck, what can't MarkdownLiteral.jl do? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, the slugification is defined in https://github.com/MichaelHatherly/CommonMark.jl/blob/efcbbc8bd1f19c96fce7fa7bcf06f6c646dd8567/src/extensions/autoidentifiers.jl#L23-L30, but it would be nice to surface that in the actual rendered headers in some way, perhaps like is done in github markdown with the anchor on hover thing. One difficulty though is that the parser only knows about the headers in the chunk of text that it parses, rather than all the other cells that contain markdown, which means that making all header IDs unique isn't really possible. (A single chunk of rendered markdown will add auto incremented numbers to headers with the same slugs.) |
Beta Was this translation helpful? Give feedback.
I don't think this is possible without some sort of special implementation on Pluto's side. The
#1f2afbc8-5e04-4f18-b047-90775443d572in the URL tells the browser to look for an element withid=1f2afbc8-5e04-4f18-b047-90775443d572somewhere in the DOM tree, but this element doesn't actually exist when the page is first fetched, which can be seen with Chrome's view source function. Instead Pluto generates all the DOM you see in inspect element right after the page loads.A very dirty way to fix this would be to place this code snippet at the end of the HTML
<head>block. A much cleaner solution could be implemented within Pluto itself by doing the same thing that's done in the snippet, but…