Importing notebook into framework with visible code

I am working on importing notebooks into a framework project using the code described at Advanced embeds | Observable documentation. However the code for things like functions and classes are not displayed in the framework project as they are in the notebook. I’ve experimented with writing a customer Inspector to deal with this, but it seems this should either be the default or something that can be easily enabled. Am I missing some configuration option ? Thanks

1 Like

Have a look at this thread that discusses various solutions and their drawbacks:

I do recognize the general problems with embedding notebooks that @mbostock mentions, but, unless I missed something, I don’t see any mention of the specific problem I’m having relating to notebook code being hidden (for functions, as one example) when displayed in a framework project…

Ah, I see now what you’re saying.

Importing from a notebook is essentially like importing from a library. The code has already been transpiled and will look something like

function _html(htl){return(
htl.html
)}

The original code is only accessible via an internal API endpoint. If you want to display it in your Framework project you will have to actually port it over (e.g. via observable convert) and wrap it in ```js echo blocks.

Oh, and also, if you want to display the code and the output (as opposed to only the output), you can add echo to the JavaScript code block (see the docs):

```js echo
const a=10
```

I’ve been able to fetch the function code with a custom Inspector and it is not transpiled in any noticeable way; the problem is that there is no syntax highlighting when I display it in the dom. Will a ```js echo block fix this? I’ve tried adding syntax highlighting via a js lib like prism but when I link that css in my framework config file, it overrides the framework css and the rest of the page looks awful…

The echo display has syntax highlighting. You can see an example of it here (community member example)

Hmm, I’m still not sure I understand how to use ```js echo when using a custom Inspector that outputs HTML ?

You cannot use ```js echo for dynamic output, since echo merely tells Framework to display the block’s code in addition to running it. That’s why I mentioned that you need to port the notebook source over to your Framework project.

To sum up, embedding notebooks in framework is not recommended. But one can, via a custom inspector, display the code for functions from an embedded notebook, just as in the notebook itself. However there is no way to get syntax highlighting from observable for such functions. One would have to use some external syntax lib for this. Am I understanding correctly ?

1 Like

To add some context, the reason that you cannot reuse existing syntax highlighting in Framework (like you can with md in notebooks) is that the highlighting gets applied during server-side compilation, so there’s no client-side component involved anymore: framework/src/markdown.ts at e6af5349ed94e6e5670aec99b783d33aeec521f8 · observablehq/framework · GitHub

One final question – is there a way to add a css file that won’t override the default css for the framework page (as it does when I add it to the config) ?

Have you already considered <style>@import url(...)</style> ?

actually just adding an html link tag to the markdown worked fine (see the above link) - thanks!