Is there some way to modify the font in which the rendered markdown cell is displayed in VS Code's Jupyter Notebook? I have searched the internet to resolve this matter, but all I understand was that this is done by default as shown in the screenshot provided in Working with Jupyter Notebooks in Visual Studio Code. The screenshot below clearly shows that the font for rendered markdown cell is different than the one set for code cells
On the other hand, My VS Code notebook Looks like this
It seems that render font for markdown has somehow been linked with the font for code cells. If I change the font for the code cell, the markdown cell render font changes too.
In settings, I found an option to set fonts for markdown preview, and I changed it to Arial, but this does not have any effect on markdown cell
I finally decided to completely uninstall VS Code, by uninstalling through control panel, then removing remaining folders from %userprofile%\AppData\Roaming\Code and %userprofile%\.vscode. Afterwards, I reinstall VS Code from the latest available stable installer and reinstalled the required extensions. But the problem still persists.
I would really appreciate any help regarding this matter
Yes, you can change the Font Size and other things too...
* -> Bullet Points
Bullet Point Image
*** -> Creates Border Line
Border Image
# -> Largest font Size
Large Font Image
## -> Medium Font Size
Medium Font Image
### -> Smallest Font Size
Small Font Image
` (Back Ticks) -> Mark the Text with Color
Back Tick Image
> -> Shade the Entire Current Cell
Shaded Shell Image
One last thing, to apply these effects you have to press ctrl + enter
for every Shell
This may help: Incorrect font used in notebook Markdown code blocks.
Apply editor-font-family to all code in notebooks (microsoft#157554)
Apply editor-font-family to all code in notebook
Fixes microsoft#146696
This matches what we do in the markdown preview
from https://github.com/Maxxisthename/vscode/commit/0103536a602d5acaffb3f4a39d8c5b31046c272b
So the editor font family you set in the settings (Editor: Font Family) should be respected in the markdown of notebook cells. If that helps...
Related
When using Jupyter notebooks in VS Code the output is rendered in a font that is not fixed width as the code itself (whereas in Colab, for example, the output is rendered the same way as code). Looking through the settings, I did not find any obvious way to disable this.
When I am using jupyter notebook in vscode, I suddenly find the default font size become so small. So how to make the default font size bigger in the markdown cell? I have tried to google how to fix the problem, but I can't find the answer. Looking forward to your reply!
Update：
After I added code< font size=3 > on the first line of each markdown cell, the display became normal. But I think I should not everytime do it because it is a waste of time.
Unfortunately there's no way to do this at the moment. Please upvote https://github.com/microsoft/vscode/issues/126294 which tracks the feature request to allow configuring markdown font sizing.
From https://github.com/microsoft/vscode/issues/126294#issuecomment-964601412
The next insiders build adds a new notebook.markup.fontSize setting
which controls the size of rendered markdown
It defaults to 120% of your editor font size (so 12px editor font size
== 14.4px). We may adjust the default value based on feedback
And see Adjust the font size in notebooks
I've installed NERDTree and vim-devicons plugins for customizing my workspace and I find that size of icons is too small, so I wanted to make them bigger without changing font-size (current font-size comfortable for me).
I've tried to find solution on original documentation, read forums etc. Also I tried to find some special Nerd Font that will have bigger icons size but unfortunately everything was unsuccessful.
Link below is an example that shows current size of my icons and font.
example with NERDTree window, tabs and status line
I'm using Windows PowerShell as my terminal and neovim as my editor.
I would be grateful if someone could explain to me how to solve my problem or tell another way (or may be another plugins) to add icons and files tree to vim.
Those icons are just text and you can only have one font and font size for the whole terminal emulator's window. Therefore, you can't adjust their size separately from the rest of the text.
Is there a way to change the debug panel's font size and appearance in VS Code? I'm referring to the side panel where variables and their values are showed when debugging a program.
Note that I want to change only its font size, not that of the entire editor.
I've come across other similar questions here in Stack Overflow, but the solutions provided required to change the zoom level of the entire editor (and thus of the debug panel too), then adjust the editor's font size. However, as I mentioned before, that's not what I'm looking for. I've searched through the settings but couldn't find anything at all. To me, it seems like a very basic feature for a text editor to have, so I can't believe there's no way to do that.
I'm using VS Code 1.40.1 on Linux
Paste these into your settings.json file USER section and change values to your liking.
Note that there is no fontWeight for debug console, but you can state the weight in the fontFamily, like in the example below.
lineHeight seems to be 1/3 bigger than fontSize by default, so that might be a good value to start with.
"debug.console.fontFamily": "Cascadia Code Light",
"debug.console.fontSize": 15,
"debug.console.lineHeight": 21,
I would assume the ability to change the debug's views' font/fontSize is coming as part of the ability to move those views to the Panel (See VS Code move debug tab (left panel) to bottom).
Added:
debug.console.fontSize
debug.console.fontFamily
debug.console.lineHeight
Previously, the size didn't apply to the debug console input. To be fixed in v1.45, see https://github.com/microsoft/vscode/issues/90714 and https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#notable-fixes.strong text
I have 1.55.1 on Linux and still don't see an option for font size in the debug variables panel (which, as originally asked, is not the debug console). So to adjust the font size in the debug variables panel independently, use the Zoom feature to adjust the entire VS code application, and then use the available font size settings for Editor, IntegratedTerminal and DebugConsole to unzoom those three back to the desired smaller fontsize.
Querying for fontsize in User Settings window yields only settings for:
editor panes,
suggest widget,
markdown preview,
integrated terminal
As you can see below:
Doing the same for sidebar gives even poorer results:
Having fonts of different sizes in editor panes and sidebar looks... let's settle with: not too nice. Have I just found the greatest omission of this awesome tool?
Just want to add to the discussion, If you set:
"window.zoomLevel": "your number",
In my case I started with zero, you can use that as sort of a baseline:
"editor.fontSize": 14,
"editor.tabSize": 2,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 0,
"[Log]": {
"editor.fontSize": 14
},
And then tweaked until I was happy.
E.g. you want to increase the sidebar font size keeping editor font size unchanged: set "window.zoomLevel": 0.5 and "editor.fontSize": 18. Look at the result. Play with both values to get the result you like.
Mihai Chelaru's answer presents a way to do more than just adjust the sidebar's font size. This, however, comes with a price of a bit of fiddling, possibly more than you'd be ready for, if the only thing you were interested in was the simple act of changing the sidebar's font size. So here's a simpler solution.
Just zoom the whole VS Code's UI in or out with CTRL++ or CTRL+- respectively and than adjust font sizes we do have control over in settings.json file, i.e.:
editor.fontSize,
editor.suggestFontSize,
markdown.preview.fontSize,
terminal.integrated.fontSize
so everything matches. That's it.
This has been a feature request for some time. The short answer is right now there's no VSCode setting that allows you to customize the sidebar font size. There is a hacky workaround solution proposed by #lindesvard in the same issue thread that involves using the Custom CSS and JS Loader extension to load in a custom CSS file that modifies the sidebar styling if you're willing to experiment with it.
To get this working follow the Getting Started section in the extension details, then add URLs to your custom files to the "vscode_custom_css.imports": [""] array. (Note that on Windows mine looks like the following: "vscode_custom_css.imports": ["file:///C:\\dev\\vscode-styling.css"])
Below are before and after adding the CSS mentioned by #PSVapour in a later comment:
Note that this also affects the command palette font.
Apart from #Mihai Chelaru's answer, I found another plugin which helped me dealing with this issue. The name of the plugin is CustomizeUI.
CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:
"customizeUI.stylesheet": {
".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},
Again, this plugin is meant to do more than just changing the font size of the sidebar. But it has some minor advantages over Custom CSS and JS Loader. Like:
It won't show Unsupported on the title-bar or won't show any error message like Your installation is corrupted.
You do not have to reload settings every time VS Code is updated.
You can zoom in and zoom out:
zoom in:
Ctrl + +
zoom out:
Ctrl + -
Change the font size with keyboard shortcuts using the FontSize Shortcuts
plugin. On a Mac, I am able to focus on the terminal or the editor and change the font size of those areas independently of each other.
https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts
Mihai's answer above works well. He notes that the CSS from here has the side effect of changing the command palette font too.
I only wanted to specify the font size for the debugger sidebar tab. At the time of writing (VS Code version 1.74.3), this custom CSS instead affects only the debugger sidebar tab:
.debug-pane,
.debug-pane .scope,
.debug-pane .expression {
font-size: 14px !important
}