I am making a VS Code extension for outlining TypeScript code structure. I am wondering how can I use the same icons VS Code uses in intellisense in my custom tree view:
Update 2022:
It is now possible to use codicons in a tree item:
getChildren() {
return [
{
collapsibleState: vscode.TreeItemCollapsibleState.None,
label: 'label',
// Replace 'circle-outline' with desired codicon: https://microsoft.github.io/vscode-codicons/dist/codicon.html
iconPath: new vscode.ThemeIcon('circle-outline'),
}
];
}
I don't think there's any way to reference built-in icons, so you would have to include copies of these in your extension. This is what the vscode-code-outline extension does (along with many others). There's a relevant feature request here:
[icons] Support to allow re-using VSCode icons in user extensions (#31466)
There's a nice overview of all built-in document symbol / suggest icons here. The .svg assets can be found here:
suggest
documentSymbols
Related
I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'ASP.NET (Core)', value: 'aspnet' },
{ text: 'Apache', value: 'apacheconf' },
{ text: 'Bash', value: 'bash' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' }
]
}
}
]
Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.
So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.
Customizing the webresource archive
PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:
[centos#cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/
After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append
console.log(Object.keys(Prism.languages))
at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?
PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.
As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:
Highlight in the editor, too
I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view
To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive
[centos#cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js
and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor:
I'm working on a theme for Wyam and I'm wondering if there's a way to set the layout that should be used in the markdown file for a particular page. As far as I have seen so far, it seems that each page created with markdown uses _Layout.cshtml
To be more specific. I'm creating an "about.md" page, which has a different layout then then other (default) pages.
So what I would like to do is use metadata to select the layout. For example
Layout: _About.cshtml
or
Layout: _About
Is this possible with Wyam?
In A Razor File
Pages in the Wyam recipes (I'm assuming you're using either the blog or docs recipe) are processed by Razor. The use of a _Layout.cshtml is by convention in the recipe, but alternate layouts can be specified using standard Razor syntax. You can do so by placing the following at the top of the about page .cshtml file (under your front matter):
#{
Layout = "_About.cshtml";
}
In A Markdown File
Markdown files are also processed by the Razor engine, so the technique above would work if it weren't for the Markdown processor escaping the # symbol. There's really no good way around that, and the simple answer to your question is you can't specify an alternate layout for a Markdown file.
However, one of the advantages of using a code-driven generator like Wyam is that you have a lot of control. In this case, you can replace the RenderPages pipeline with one that will do exactly what you want. Add the following to your wyam.config file:
int index = Pipelines.IndexOf(Blog.RenderPages);
Pipelines.Remove(Blog.RenderPages);
Pipelines.Insert(index, Blog.RenderPages,
(IPipeline)new Wyam.Web.Pipelines.RenderPages(
Blog.RenderPages,
new Wyam.Web.Pipelines.RenderPagesSettings
{
Pipelines = new string[] { "Pages" },
Layout = (doc, ctx) => doc.String("Layout", "/_Layout.cshtml")
}));
Then you'll be able to add a "Layout" value as front matter exactly like you wrote in your question.
This was a good idea in general, so I've also opened an issue to add this behavior to the recipe by default.
I have a custom js-doc attribute which contains the path to the dependency file.
eg: #dependency {import('loadash/somefile')}
Since this is simple string and error prone, I am looking for a way to extend vs-code import intellisense to this custom js-doc attribute. Vscode supports intellisense for standard js-doc attributes #type, #param and #typedef, would be great if there is a way to extend this behavior to my custom attribute.
example of the intellisense for #type attribute
I looked at few extensions related to this, but none offer the rich experience vscode offers. Any pointers in this regard would be really helpful.
Thank you for your time.
You could write a snippet for a quick and dirty solution. A snippet will show the intellisense menu and insert a piece of code based on a prefix you enter. They are saved in a JSON file in your settings directory ~/.vscode and would look something like this:
{
"deprecated": {
"scope": "javascript",
"prefix": "#D",
"body": "#Deprecated {import('${1:path}')}"
}
}
I'm currently writing an extension that lists files in a QuickPick dialogue. Is there a way to add the icons to the QuickPickItem's label?
Or in other words, re-use the vscode-icons extension?
As far as I know you cannot reference an svg from something like the vscode-icons extension.
You can use Github Octicons in any of the QuickPickItem properties right out of the box:
const items: vscode.QuickPickItem[] = [{label: '$(git-merge) Merge Branch',
description: '$(git-commit) 1 commit',
detail: '$(diff-added) 3 $(diff-modified) 2'}]
vscode.window.showQuickPick(items)
You can even just pass in an array of strings to showQuickPick:
vscode.window.showQuickPick(['$(diff-added) Add', '$(diff-removed) Remove'])
Is there currently any way I can create an extension that applies a text decorator above or below the specified range which I can use to supply any HTML/CSS visual I want?
I'm still working through the API and my guess is either no, or not directly via the extensions API.
It depends on what types of decorations you are talking about. Since you used the words "text decorator" then I'm going to assume you're talking about the decoration API described here.
As you can see, there are several css properties that they officially support, but none of them "arbitrary css".
What I've done, though, in my vscode dimmer extension, is apply an opacity style using this technique:
dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
textDecoration: `none; opacity: ${opacity / 100}`
});
When vscode sees this, it basically adds text-decoration: none; opacity: 1 to the stylesheet.This allows me to use arbitrary styling.
The above snippet creates a "Decoration" which can then be applied to ranges as shown below.
function dimEditor(editor: vscode.TextEditor) {
if (!dimDecoration) return;
let startPosition = new vscode.Position(0, 0)
let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}
Disclaimer: Of course, this isn't officially supported and they could change the way they process the arguments to stop at the first ; and anybody using this workaround would have a broken extension.
Edit:
If you're wanting to have a "hover" behavior, there is the HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension uses it to display img previews on hover.
If markdown will meet your needs you can try that, otherwise you can try with arbitrary HTML and see if it accepts that.