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!
We kept working on this one and anyone interested in this thread may want to have a look at this Framework project An Observable Framework Project that Embeds and Displays Highlighted Code from an Observable Notebook | Frameworked Notebook demonstrating advanced embedding of a live Observable notebook with all code and code-highlighting, although this does require some notebook coding conventions in order to be properly displayed. The demo notebook is A Frameworked Notebook / John Cayley | Observable.
Use case: automatic publication of content and code to a literate programming static site from (re)active notebooks at Observablehq. For education and documentation. For composition and development on the way to making fully archivable literate programming sites (within which the notebook cells would be copied or otherwise moved into Framework pages).
@mootari I posted the above yesterday and then, today, found your amazing work-in-progress notebook Printable Notebook / Fabian Iwand | Observable. Shouldn’t Framework static sites be able to display notebooks as, effectively, you do with Printable Notebook?
@shadoof There are several differences that make it difficult to integrate notebooks directly into Framework projects. Most importantly, notebooks rely on @obervablehq/stdlib which is incompatible to the standard library that Framework ships.
As a result notebooks would need to load their own stdlib and might even need their own runtime instance, which in turn makes interfacing with them through a framework project awkward. Furthermore the code that you load is not the code that you see in editors, and macros like "viewof and “mutable” are invalid in Framework (not to mention that there’s no supported endpoint yet to retrieve a notebook’s raw text).
Lastly, displaying remotely loaded code as if it were part of the page’s Markdown does not necessarily provide a good user experience. If you need all that I would recommend to embed the notebook as an iframe or link to it directly.
Thanks @mootari ! All that makes sense in terms of Observable infrastructure. The embed-iFrames solution does not work for what I want to do because the embedded iFrame does not render the code that generates cell values, it inspects and renders the values. By contrast, I want my static site to render both the values and the code. This is, as I say, for documentation and education, because the notebooks that I am composing have this purpose, a purpose allied with the goals of literate programming generally.
Why not just do my composition in Framework from the get-go? (Using, for example, fenced code blocks with js echo.) Because Observable notebooks provide a great editor, not only with auto-saving and retention of document state (and history!), but with ‘also-great’ live coding and reactive evaluation of code snippets, and so on. For my purposes (documenting and sometimes reengineering past work) this makes the coding-style workarounds required (for the static site that tracks my notebooks) worth it … for me and for now, anyway.
1 Like
Oh, right - I forgot that pinned editors are hidden in iframe embeds.