Is it possible to create an extension to vscode that changes the CSS of the editor? - visual-studio-code

I wish to develop an open-source WYSIWYG editor for markdown in vscode.
See the image below. I want an extension that can do something like that.
Change font-sizes for lines for titles.
Change lines indentation for subtitles.
I'm looking at the extension reference: https://code.visualstudio.com/api/references/vscode-api and don't see something that can help.
Do you have an idea how to change the CSS of the editor based on rules? in addition, If you have a link to extension that did it may help.
In other words: How a vscode extension can change css style of the editor window?


You can't change arbitrary css in the editor. See the extension guide for info about the VS Code extension philosophy and how you can extend VS Code
Two options:
Use the decorations api to change rendering of tokens in the editor.
Use a webview to implement a custom view (but don't try re-implementing a text-editor because it will be a pain and will not work like VS Code's normal editors do)

Related

Markdown headings not appearing in outline box in VS Code

While editing a markdown document in VS Code, the outline box does not show me the outline of the markdown document; it's completely blank/empty. I've disabled all extensions with no change in behavior (and I only had one markdown-related extension anyway, markdownlint). I don't know that this has ever worked, but it certainly has not for the last several months.
OS: Mac OS 12.3
VS Code: 1.65.2

Out of the box, Markdown headings should show up in the outline view as text nodes:
If the outline view is configured not to show strings, Markdown headers won't appear.
Take a look at the Outline: Show Strings setting in your preferences and make sure it's enabled.
This setting is called outline.showStrings. If you wish to enable it only for Markdown files, you should be able to disable the feature globally and then add something like this to your settings.json:
"[markdown]": {
"outline.showStrings": true
},
It's probably easiest to start by running Preferences: Configure Language Specific Settings... in the command palette and then selecting Markdown.

Is there a way to change background color of syntax highlight in Visual Studio Code

I was looking for a better code editor for my projects and wanted to give VSCode a try. But I couldn't find where to customize the syntax highlighting settings. What I actually need is to change the background color of embedded languages within a file so that I can identify different parts of the code a lot easier.
I have this PHP file which contains, HTML, CSS and JavaScript and I'd like to set different background colors for all 4 languages within this single file. Is this possible with VSCode? or does anyone know a code editor that supports this? UltraEdit supports this but it has so many other shortcomings.

Not possible #3429 Themes don't support background styling

-webkit-text-stroke equivalent in VSCode

My text rendering in VSCode is blurry and I want to make it like my Atom text editor. In atom, the text rendering can be improved by controling -webkit-text-stroke and -webkit-font-smoothing property.
I wanted to know how to change these properties in VSCode.

VS Code does not expose direct css styling like Atom does
Support for configuring text-stroke is tracked here
You can also try the workbench.fontAliasing setting.

How to draw on the background in a vscode extension?

Is it possible to make an extension that draw lines on the background? You can decorate a lot of thing but I can't find a way to draw colored lines.
I would like to see the flow of my data (inspired by visual programming).
Something like that (but the like drawn under the text) :

Keep in mind vscode is an add-on to Electron, which is a webbrowser in a desktop raiment. So what you see are webpages and hence everything what's possible on a webpage (with a node.js basement) is also possible in vscode - at least in theory. I say "in theory" because after all vscode is a text editor and limits interaction in a way that supports this goal. So, what you can is either some drawing/graphics or add extensions that work in normal editor pages. You certainly don't want to write your own text editor interface within vscode.

VS Code customize sidebar

Is there any way to customize sidebar in VS Code? In particular, I want to change the font size. Is there a user setting for that? Or, maybe, I can edit it somehow via stylesheet since it's an Electron app, like in Atom?

There are no user-defined stylesheets for vscode.
The only ways to scale various parts of the UI currently are through the overall zoom level (window.zoomLevel) and the editor's font size (editor.fontSize).
I created a feature request for this on the repo.
As mentioned in other answers there are extensions which allow injecting custom CSS, you should be careful using these as they directly manipulate the source code of VS Code which could lead to problems elsewhere and any modifications could break when you update.

I Found a way to change the font of Visual Studio Code Window.
First, open command Pallete, and type "Toggle Developer Tools"
This will open "Chrome Inspector".
Select any text of sidebar of app.
Search .monaco-shell class in "styles" tab at right side inspector ( Where show every styles of the current document ), then the font-family attribute.This is tab and stylesheets.
In workbrench.main.css hit right click and click in "Open Soruce Panel" Show like this
Format the css Code with this icon.
ctrl+f for found font-family attribute again, 'cause the format redirect to end of css document, and get .monaco-shell class like this in ~6371 line.
Change this font ( I have change to Droid sans Mono font ), but you change to you want.
Why i'm not change in the real document css
'Cause, when i changed the font family in the real document css ( C:\Users\${user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbrench.main.css) generate a error saying "Vscode have a error, please reinstall the program" or similar
When generate a actualization of application, the font family declareated will deleted, and the document css is´t a pretty code.
This process change every fonts of visual studio code application (not include the editor font )

I found it very effective to use the general zoom settings (it's somewhere in that huge settings window). This adjusts the zoom level of the entire app. Tweak it till you like the size of your explorer window, then adjust the settable editor font to be readable with that zoom level. I three parallel code windows of 80 columns plus the explorer on a good 17" laptop monitor, readable if you are OK with 8pt code font (which is actually 11 point font zoomed two notches down).

Although there is no direct way of customize the sidebar from settings as #Daniel Imms mentioned in his answer, but I found 2 plugins which helped to resolve this issue. You can either one of them if you want.
1. Custom CSS and JS Loader
In Custom CSS and JS Loader plugin, you need to create a custom css and then this plugin will inject that code directly in electron-browser/index.html(as VS Code is an electron based editor). I use this CSS in my Mac:
".explorer-viewlet .mac": "font-size: 1.2em !important",
2. 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",
},