I am working on a new flavor of Markdown that introduces some new syntactical elements. I have manually modified the markdown.tmLanguage.json file bundled with VSCode to implement some syntax highlighting for them. I would now like to create a VSCode extension that provides the new additions to Markdown's syntax highlighting.
However, I do not really think that copy-pasting the original Markdown syntax highlighting logic just to add a few things on top is a good idea -- is there a way to create a .json syntax highlighting file that inherits (for lack of a better word) the existing syntax highlighting from another file?
For example, here's some pseudocode:
{
"version": "1.0.0",
"name": "My Markdown Flavor",
"extends": "markdown.tmLanguage.json", // <- PSEUDOCODE
"repository": { "... insert my extensions here ..." }
}
Is that possible? Or do I have to copy-paste the entire markdown.tmLanguage.json file?
I figured it out -- it is sufficient to include text.html.markdown as the last pattern:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Majsdown",
"patterns": [
{
"include": "#majsdown_inject_expression"
},
{
"include": "#majsdown_execute_statement"
},
{
"include": "text.html.markdown"
}
],
// ...
Related
I am using VS Code and would like to have markdown headings displayed underlined in the source code. I have added the following configuration:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"markup.heading.markdown",
],
"settings": {
"foreground": "#C0C3CA",
"fontStyle": "underline",
}
},
],
}
This basically works. The spaces in between the words however are not underlined, see this screenshot:
Is there a possibility to have these underlined as well?
According to the scope inspector the spaces also have the markup.heading.markdown scope, just like the words. So I don't see why they do not get underlined.
Any ideas?
It conflicts with "editor.renderWhitespace": "all" setting.
You can find out more a about why it happens on GitHub:
https://github.com/microsoft/vscode/issues/49462
https://github.com/eclipse/che-che4z-lsp-for-hlasm/issues/6
I have an extension that provides some snippets. I want to add a command that creates a new file with the snippet automatically triggered for the user. The idea is to get the user to edit the tabstops immediately without any further action. Something like:
Run the command (from the command palette, or a keybinding)
VSCode opens a new file with the snippet already evaluated and waiting on the first tabstop for user input
I have scouted the APIs but I haven't found anything to trigger a snippet. The most relevant APIs are those about the CompletionItemProvider, which can be used to provide a snippet.
Does anybody know how to trigger/expand a snippet automatically?
There is also an insertSnippet method on the TextEditor, see https://code.visualstudio.com/api/references/vscode-api#TextEditor.
So you could do this:
const editor = vscode.window.activeTextEditor;
// build your snippet with the SnippetString methods
const snippet = new vscode.SnippetString("option1 attr1=${2:Option 1 Placeholder 1} attr2=${3:Option 1 Placeholder 2}");
await editor.insertSnippet(snippet);
You can also run the command insertSnippet like this:
// body of snippet here is exactly as you would write it in a keybinding
await vscode.commands.executeCommand("editor.action.insertSnippet", { "snippet": "${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}Z" });
// the below uses a pre-existing snippet with a name 'Custom Header'
await vscode.commands.executeCommand("editor.action.insertSnippet", { "name": "Custom Header"});
This last executeCommand can have a reference to a pre-existing snippet that you contributed in your extension. For more see below.
All these commands will insert at the cursor with the snippets in the first tabstop position as you wanted.
Contributing snippets in your extension:
In your package.json:
"contributes": {
"snippets": [
{
"language": "javascript",
"path": "./snippets/javascript.json"
}
]
}
You create a folder named snippets in your extension and a file named javascript.json for javascript snippets. And then use the usual snippet format in that file, like:
{
"Custom Header2": { // use this 'name'
"prefix": "reactpure",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"import './${1:ComponentName}.module.css';",
"const ${1:ComponentName} = ({ ${2:propValue=[] } }) => (",
"<${3:rootelement}>${4:content}</${3:rootelement}>",
")",
"${1:ComponentName}.propTypes = {",
"${5:propValue}: PropTypes.string",
"};",
"export default ${1:ComponentName};",
"$0"
],
"description": "Create a react pure component"
}
}
Then you can use that name in your extension
// using an extension-contributed snippet
await vscode.commands.executeCommand("editor.action.insertSnippet", { "name": "Custom Header2"});
``
I want to have create the following snippets:
"fraction": {
"prefix": ["//"],
"body": [
"\\frac{$1}{$2}",
],
"description": "Fraction"
},
I have many snippets in my latex.json file and all seem to work fine but this one doesn't, any idea why this could be the case?
I'm trying to make a VSC extension to hightlight a custom language and I face a problem: I need to hightlight a variable identifier in a specific way only if it's right after an opening paren (it's a lisp like).
So far, I've tried multiple variations of this (in my .tmLanguage.json, under the repository field):
"builtins": {
"patterns": [
{
"begin": "\\(([a-zA-Z_][a-zA-Z0-9_\\?:']*)",
"beginCaptures": {
"1": { "name": "entity.name.function.arkscript" }
},
"name": "entity.name.function.afterparen.arkscript"
},
{
"name": "keyword.operator.ark",
"match": "(\\+|\\-|\\*|/|<|>|<=|>=|!=|=|#)"
}
]
},
I know for sure that in the beginCaptures, the "0" is refering to everything, thus "1" must be the thing I matched, but using the scope inspector, I can see it's doesn't work for (hello "test"). The string is colored correctly but hello has the scope of a variable, not of a builtin.
If anyone knows a way around please let me know
I am currently writing a vs-code FTP type extension, which requires me to use the "TreeView". I have found this link:
https://code.visualstudio.com/api/extension-guides/tree-view
Which guides you through adding a tree view to the sidebar. However I am having trouble getting this off the ground, Step one on the above mentioned guide already does not seem to add the icon to my vscode sidebar? Thus holding from making any progress...
Obviously I am misunderstanding something! I am rather new to TypeScript and have trouble following others code on this subject. Please could anyone just help me getting the first step working?
This is my package.json contributes:
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
}
],
"viewsContainers": {
"activitybar": [
{
"id": "live-workspace",
"title": "Live-Workspace",
"icon": "./src/Treeview/laptop.svg"
}
]
}
}
From what I understand this should place a "functionless" icon on the sidebar? Am I understanding this wrong? Is there more to be done to achieve this? Thanks!
A view container will only show up if it contains at least one view. It works for me once I also add the following to the contributes section:
"views": {
"live-workspace": [
{
"id": "exampleView",
"name": "Example View"
}
]
}