I use markdown headers to navigate in notebooks but I also tend to make a lot of (non-header) markdown notes. Both show up in the outline which makes finding the right heading quite difficult as notebooks grow large.
Is there a way to suppress plain markdown cells showing up in the outline?
I have followed the discussion on github and at Creating Table of Contents in VS code Jupyter Notebook
the author of one answer was also not satisfied with the outline feature and created jupyter TOC extension, and at some point, I also ended up using it. This has an option to exclude text from visualization (I believe it is possible to set maximum expansion level), but I still consider the outline more desireable, because it stays visible when I scroll the document, which I consider essential.
The workaround I found is to put, when possible, text in the same cell as the header. This makes it easier to keep the outline clean, and just avoiding to expand too much the outline works decently for me, even if it implies some annoying restrictions on the way you structure text. Other than that, it is possible to play with the collapse/expand feature of the outline and get a sufficient control, even if the possibility of completely exclude the text is still a desireable upgrade.
Related
In VS Code Jupyter Notebooks, it is really hard to distinguish between a first level header and a second level header, which makes it hard and confusing to navigate in a long document. I have very poor knowledge of CSS and I couldn't find a way to customize the font size and color of headings.
Please note I'm referring to rendered markdown (in preview).
Thank you for your help.
For a half year now, I carry an innovative idea for a modern way of code editing. I just realized what Visual Studio Code extensions are already capable of and made me wonder.
The idea is that a real time code render mode for code editors where code is visualized like rendered documentation (for example Doxygen). Non-commented lines of code are displayed like collapsable codeblocks and documentation comments are displayed as the surrounding markdown/HTML/LaTeX document.
This rendered view still can be edited and navigated in same way as the classic text view so that new graphical elements appear after typing them as text into a comment. Therefore, rich interactive documentation reading (like hiding/showing parts, jumping across locations with hyperlinks) and code editing would be combined into one activity without time needed for switching between both or mapping Documentation with actual code locations. Different from the original literate programming idea, the file's physical content is unchanged and doesn't complicate the process or source code reading.
It's conceptually how Moodle text editors work (HTML code view and render view) or like using a graphical word processor to visualize source code instead of a single monospace text. Of course, the cursor would move along lines in their visually presented order and not in their file's actual order.
Do you know, if such a real time render mode is possible in VSCode?
Did someone had such an idea and made an extension?
btw:
This "render mode" idea is actually quite generic and could be used as general customizable GUI technology that would allow GUI elements to be navigated, edited via an underlying text representation.
I am trying to determine if its possible to provide a "richer" experience when using TreeViews in a VS Code extension. The default explorer view has the ability to do things provide custom text coloring for items (such as red when a file has an error or yellow if its been changed). However, the only highlight I can seem to find in TreeItems is only able to highlight text in an item without control over color but only select when the highlight starts/stops.
I would really like to take advantage of the same tree experience provided by the VS Codes extensions view but it does not seem to be restricted by the same API as other extensions (makes sense).
Any recommendations? I am considering just doing a webview that holds my own "TreeView" but wanted to see if there are other options before going down that rabbit hole.
I have a VSCode extension that helps me autocomplete file paths, however many file paths grow long and are truncated in the VSCode intellisense popover window.
How can I set VSCode to either:
have a fixed width that I can set to be large
automatically expand to fit the intellisense options (preferable)
I happen to have written the extension so if needed I can update it if that is required.
One way around this is to press Ctrl + Space (or what ever your "Trigger suggestion" shortcut is) while the suggestion popover is open to show more detail about current selection.
So this (where I can't differentiate between the Trans imported from #lingui/macro and the one from #lingui/react):
Becomes this:
I don't think this is possible, VSCode generally gives extensions very little control over the built-in UI. See also the Restrictions section of the Extensions Capabilities Overview. Technically there is a way to hack around that, but I wouldn't necessarily recommend it.
There are also a number of settings for the suggest widget, but none of them seems to correspond directly to width. The closest you can get would be reducing the font size with "editor.suggestFontSize".
e.g. I write a markdown document and include a line like [myimage](/mypath.jpg) to see the image in a big size above or below this line.
When I'm writing markdown I regularly have to look at an embedded file. At the moment I have to use a split layout and switch my attention between the text buffer and the preview. That's slowing me down and distracting.
What I mean is a full size preview that can fill the whole width of the buffer and is permanently shown. This is offered by the emacs markdown-mode (see this image with a command named "markdown-toggle-inline-images".). This is also available in sublime text e.g. via an add-on named sublime_zk. This is possible in atom with add-ons like preview-inline or inline markdown images.
This would allow to use VSCode like a WYSIWYG md-editor like typora but with all the benefits of using your daily edtior. This should also be interesting for programmers - at least on hackernews typora is regularly praised as the best markdown editor (see e.g. here)
I didn't see an addon for this. Something related was discussed about two years ago in issue 7689 - but this only concerns a mini preview in the gutter or if you move the mouse over a link. For this there is already the add-on Image preview.
This is not possible as of VS Code 1.29. The VS Code api does not provide a way to insert custom elements like images into the editor.
The two closest existing APIs:
The code lens api: CodeLensProvider. These allow you to insert additional clickable commands into an editor (such as displaying a reference count above a function) but these can only be text buttons
The hover api: HoverProvider. Hovers can contain images since they display markdown content. However they are only displayed when the user hovers over them