Closed goessner closed 6 years ago
For markdown, you'd want to inject your custom rule for $...$
into the top level markdown grammar. This extension probably provides a better example of this: https://github.com/styled-components/vscode-styled-components/blob/master/syntaxes/styled-components.json
I think the injection selector would be:
"injectionSelector": "L:text",
Although I'm not entirely sure if this will work or not
Hello Matt,
after some time I came back to styling my custom $...$
markdown math rules. I have had some success now, as I was able to give the formulas the green style of javascript comments.
But unfortunately I destroyed the styling of markdown headings (should be blue), links and others. I have no idea, what in my package.json
and/or dollars.json
might be responsible here.
I would be glad, if you can give me some hint here ... thanks
@goessner Hmm, I'm not sure. Can you please share the full grammar file and your package.json
so I can investigate
sure ... thanks
grammar dollars.json
:
{
"fileTypes": ["md","markdown"],
"injectionSelector": "L:text.html.markdown",
"patterns": [
{
"name":"block-dollars",
"begin": "[ \t]?\\${2}",
"end": "\\${2}",
"contentName": "comment"
},
{
"name":"inline-dollars",
"begin": "[\t ,.;|]\\$",
"end": "\\$",
"contentName": "comment"
}
],
"scopeName": "text.html.markdown"
}
package.json
{
"name": "mdmath",
"displayName": "Markdown+Math",
"description": "LaTeX Math for Markdown",
"icon": "img/icon.png",
"version": "2.0.7",
"author": "Stefan Goessner",
"publisher": "goessner",
"keywords": [
"TeX",
"LaTeX",
"KaTeX",
"markdown",
"math"
],
"galleryBanner": {
"color": "#efefef",
"theme": "light"
},
"homepage": "https://github.com/goessner/mdmath/blob/master/readme.md",
"repository": {
"type": "git",
"url": "git+https://github.com/goessner/mdmath.git"
},
"bugs": {
"url": "https://github.com/goessner/mdmath/issues"
},
"license": "MIT",
"engines": {
"vscode": "^1.8.0"
},
"categories": [
"Languages",
"Other"
],
"activationEvents": [
"onLanguage:markdown"
],
"contributes": {
"configuration": {
"title": "mdmath",
"properties": {
"mdmath.delimiters": {
"type": "string",
"default": "dollars",
"description": "Math formula delimiters."
}
}
},
"markdown.previewStyles": [
"./node_modules/katex/dist/katex.min.css",
"./css/texmath.css",
"./css/vscode-texmath.css"
],
"markdown.markdownItPlugins": true,
"commands": [
{
"command": "extension.clipToHtml",
"title": "Clip Markdown+Math to HTML",
"category": "Markdown"
}
],
"keybindings": [
{
"command": "extension.clipToHtml",
"key": "ctrl+K .",
"when": "editorTextFocus"
}
],
"languages": [
{ "id":"source.markdown.math",
"extensions": ["md"]
}
],
"grammars": [
{
"injectTo": ["source.md"],
"language": "markdown",
"scopeName": "text.html.markdown",
"path": "./syntaxes/dollars.json"
}
]
},
"main": "./extension",
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install"
},
"devDependencies": {
"vscode": "^1.0.0"
},
"dependencies": {
"argparse": "^1.0.9",
"clipboardy": "^1.1.2",
"cross-spawn": "^5.0.1",
"entities": "^1.1.1",
"execa": "^0.6.0",
"get-stream": "^3.0.0",
"isexe": "^2.0.0",
"is-stream": "^1.1.0",
"katex": "^0.8.2",
"linkify-it": "^2.0.3",
"lru-cache": "^4.0.1",
"markdown-it": "^8.3.1",
"markdown-it-texmath": "^0.4.0",
"match-at": "^0.1.0",
"mdurl": "^1.0.1",
"npm-run-path": "^2.0.0",
"path-key": "^2.0.0",
"p-finally": "^1.0.0",
"pseudomap": "^1.0.1",
"shebang-command": "^1.2.0",
"shebang-regex": "^1.0.0",
"signal-exit": "^3.0.0",
"sprintf-js": "^1.0.3",
"strip-eof": "^1.0.0",
"uc.micro": "^1.0.3",
"which": "^1.2.9",
"yallist": "^2.0.0"
}
}
Try:
"grammars": [
{
"injectTo": [
"text.html.markdown"
],
"scopeName": "markdown-math",
"path": "./syntaxes/dollars.json"
}
]
and:
{
"injectionSelector": "text.html.markdown",
"patterns": [
{
"name": "block-dollars",
"begin": "[ \t]?\\${2}",
"end": "\\${2}",
"contentName": "comment"
},
{
"name": "inline-dollars",
"begin": "[\t ,.;|]\\$",
"end": "\\$",
"contentName": "comment"
}
],
"scopeName": "markdown-math"
}
Main changes:
scopeName
L:
on the injection selector. I believe that causes the dollar patterns to get injected into themselves. Not sure if there is a better way to avoid that.Works like a charme now ... thanks a lot.
Please allow me a final question: How can I use my own color (middle gray) instead of javascript comment green?
The color comes from the syntax theme so you can't specify it directly. Try to look through the styling for existing markdown elements and see if they use scopes that makes semantic sense for your type of content. Inline code for example uses the markup.inline.raw
scope, which themes style in its own way:
I recommend trying to make use of one of the existing semantic scopes rather than trying to define a new one, since a new scope will require updating every syntax theme out there. (You can still add more specific scopes for your content, just make sure there is a fallback to a more well supported one)
I understand the concept of themes and semantic colors better now, follow your recommendation and pragmatically take markup.inline.raw
... thanks.
p.s.: I see, that the begin
and end
regexs are not able to span multiple lines and have read about that deficiency of TM patterns. I don't think that there is a workaraound meanwhile.
I am quite interested here.
My first intent would be to supress markdown tags inside of inline
$...$
and block$$...$$
formulas.I installed this extension, but could not see an orange colored text inside of
*.js
files.I am sure, that I miss some additional information but cannot tell, what exactly it is.
thanks for listening, your work and help.