I’ve created a custom JupyerLab theme.
I would like to hide my JavaScript code.
I have been able to hide my CSS.
Any tips to doing this? Thanks.
Can you please define the word “hide”?
1 Like
This is my Javascript code. I’m having to put it at the top of the notebook for the notebook to utilize this code.
I would like to “hide” it in a JupyterLab theme development, so that when a user joins they don’t have to see/run the JavaScript at the top of the notebook for it to work.
Thanks in advance @lodka
The best way to implement a theme is to make a theme extension and publish it to npm. Such as this one GitHub - oriolmirosa/jupyterlab_materialdarker: The Material Darker theme for JupyterLab. In that way, all js and css code will be hidden and you can switch between themes easily via Settings → Jupyterlab Theme.
I’m not sure that there is any other way to hide js code.
1 Like
@lodka than you for the info will take a look
We are creating a theme and publishing to pip
It just becomes a pure python package.
But I might look to that theme to see if it has some custom JS.
The ability to create pip installable extensions only started with JL 3.0 which was just released, hence a lack of docs.
Right. And the quickest road to a theme package is the theme-cookiecutter, though having a good gander at the official docs is always a good idea!
With Lab 3 federated modules, there are a few pointy bits around fonts, but it pretty much works, and you’ve got the webpackConfig escape hatch if you really get into.
Here’s a new theme i made this week for reference… it was hand-made, not using the cookiecutter, but was informed by some of the stuff the cookiecutter does for lab3. It also shows a relatively light-weight way to make it use the theme by default. One relatively neat thing it does (currently in PR) is stack up a light and dark theme in the same CSS, reusing a common set of upstream design variables. Not recommended for the faint of heart!
3 Likes
@bollwyvl awesome thanks. will look into this
Ya im using cookiecutter which is helping me with the CSS. but there really isnt documentation for JS.
If you have more documentation about this please send!!!
Thanks.
@bollwyvl cookie cutter was GREAT by the way for css … again if you have anything specific to JS and how to implement that would be awesome.
thanks.
anything specific to JS
That would be the official docs linked above.
how to implement
We still dont’ really know what you’re trying to do. Your best bet is to do a thorough read-through of the extension developer guide, do one of the tutorials, then start looking into other repos (like the extension-examples that are like what you want, and then steal all of that (with attribution, of course).
1 Like