Personal Wiki, TiddlyWiki5 and MediaWiki Syntax - plugins

Background: I was hoping to run Gollum to run a personal wiki that could just render marked up files I take notes in. But my primary machines are Windows... so that's not happening. Running a VM for it is just too much hassle for it's purpose.
Current Status: I'd like to give TiddyWiki5 a shot primarily because of it's awesome portability. But I'd also like to write/preserve my notes in MediaWiki syntax, to make it easier to port notes or even whole pages over to wikis I commit to.
I have unsuccessfully searched for a plugin to allow mediaWiki syntax.
The original plugin is outdated and unsupported
Question: Does anyone know of a plugin or hack to add mediaWiki syntax support for TW5?
Alternative platform suggestions are also welcome.

Requirements:
TiddlyWiki
TiddlyWiki Markdown plugin
Pandoc
Sublime Text
Sublime Text Pandoc
Mediawiker
So after some more research I've decided that for the time being it'd be easiest to just write TiddlyWiki entries in Markdown. Using the Markdown plugin.
Then just convert the markdown files to MediaWiki via Pandoc. Or rather using Pandoc through a Sublime Text plugin.
The settings for Sublime Text Pandoc by tbfisher (after installation) are under Preferences => Package Settings => Pandoc => Settings - User.
You also require the Sublime Text Mediawiker to provide the syntax setting for MediaWiki files.
My current (testing) settings are as follows:
{ "user":
{ "pandoc-path": "C:/Pandoc/pandoc.exe",
"transformations": {
"Markdown (Pandoc)": {
"scope": { "text.html.mediawiki" : "mediawiki" }
},
"MediaWiki" :{
"new-buffer": 1,
"scope": { "text.html.markdown" : "markdown" },
"syntax_file": "Packages/Mediawiker/Mediawiki.tmLanguage",
"pandoc-arguments": [
"--to=mediawiki"
]
},
"Markdown (GitHub)" : {
"new-buffer": 1,
"scope": {
"text.html.mediawiki" : "mediawiki+hard_line_breaks",
"text.html.markdown" : "markdown"
},
"syntax_file": "Packages/Markdown/Markdown.tmLanguage",
"pandoc-arguments": [
"--to=markdown_github",
"--atx-headers"
]
}
}
}
}

Related

VSCode's User Snippets Not Working for Markdown and Latex Files

I have gotten user snippets in VSCode to work for C and C++, but for some reason VSCode is not providing snippet suggestions for .md and .tex files.
Here is a minimal example of tex.json (that doesn't work):
{
"dummy": {
"prefix": "dummy",
"body": [
"some random text for demonstration"
],
"description": "A dummy snippet"
}
}
VSCode provides suggestions in .md and .tex files, just not user snippets. How do I fix this issue or employ some other way to use user snippets for Markdown and Latex?
Update: Snippets are now working in .md files, thanks to the comment by #Mark. I need to type the prefix and press Ctrl + Space. This solution does not, however, work for Latex.
For markdown files try this language-specific setting in your settings.json file:
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}
and you shouldn't need to trigger the snippet suggestion with Ctrl+Space anymore.
[For latex files I don't need that setting - if snippets aren't working in your latex files try the same setting but with latex.]
Sometimes "Ctrl+ Space" is a shortcut for switching input methods on Windows, please turn it off, it works for me

.ejs formatting in VSCode

This is my problem - its unreadable
In order to get .ejs working in general, I've so far added the following. I also have format on save and prettier. I'm looking for proposals to get better formatting of this so that I can read it.
"files.associations": {
"*.ejs": "html",
"*.css": "postcss"
},
"emmet.includeLanguages": {
"postcss": "css",
"ejs": "html"
},
"emmet.syntaxProfiles": {
"postcss": "css",
"ejs": "html"
}
I know that's an old question, but working with .ejs in VSCode is still a problem. But I found the solution (for ? delimeter)
Install EJS language support plugin
Now you have ejs support, highlighting, and snippets, but some tags like
<? for( let item of array ) { ?>
(some data)
<? } ?>
are formatted incorrectly (at least with default html formatter).
To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation with <? ... ?> tags.
To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.
I hope I helped somebody to setup VSCode for .ejs files
I would suggest using
EJS language support
which is according to them
Syntax highlighting for EJS, Javascript, and HTML tags. Includes
javascript autocompletion.
and if you are interested in a Linter you should check out
EJS-Lint
which according to them
EJS-Lint parses scriptlet tags (<%, %>, <%_, _%>, and -%>). It ignores
all other tags (i.e. <%=).
Note: This linter does not attempt to check for unclosed EJS tags, so
if you get an error Unexpected token with a line number that doesn't
contain any scriptlets, you most likely forgot to close a tag earlier.
It also is set up to handle old-style includes (<% include filename
%>) by ignoring them. It does not lint included files regardless of
the method of inclusion.
It can work with custom delimiters, just pass it in the options (if
using the API) or pass the --delimiter (-d) flag on the CLI.

Auto Format on Visual Studio Code for .cfm files

Does anyone know if there's a way to auto format ColdFusion documents on VSCode the way it does for HTML files?
Auto format HTML, JS & CSS within CFM/CFML files?
If you want, you can install the Beautify and then add cfc, cfm, & cfml as languages in the settings.json file. After that, you can use "Beautify Selection" or "Beautify File" to modify code. If the plugin can't decide what type of code you are formatting, it will prompt you for "HTML, JS or CSS". (I've assigned a shortcut so I don't have to press CTRL+SHIFT+P to search for the the beautify option.)
SETTINGS.JSON
"beautify.config" : {
"beautify.language": {
"js": ["js","json","cfc"],
"css": ["css", "scss"],
"html": ["htm", "html", "cfml", "cfm"]
},
"html": {
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "cfm", "cfml"]
}
}
In VS Code, click on Extensions on the left side. Or View >> Extensions (or CTRL-SHIFT-X on Windows). Enter "CFML" in the Search box, and choose KamasamaK's extension (kamasamak.vscode-cfml). It is an excellent extension. There are also others, if you're interested.
Or https://marketplace.visualstudio.com/items?itemName=KamasamaK.vscode-cfml

Create a Sublime Text 3 .sublime-completions autocomplete file on mac

The Sublime Text documentation is clear on the syntax for HTML, but not clear on where to place the file for mac using version 3. I want to generate my own auto-completes for Plain Text. Ideally allowing me to down/up arrow through a list of likely auto-completes.
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "a", "contents": "$0" },
{ "trigger": "abbr\t<abbr>", "contents": "<abbr>$0</abbr>" },
{ "trigger": "acronym", "contents": "<acronym>$0</acronym>" }
]
}
All package resource files need to be stored in a Package for Sublime to be able to find and load it. For your own customizations, the appropriate place to place the file is in your User package, which you can find via Preferences > Browse Packages from the menu.On MacOS, that would be Sublime Text > Preferences > Browse Packages.
In order to have completions for plain text, you need to change the scope from the HTML specific scope to one for plain text.
In order to determine the scope that you want to apply (which also counts for things like Key Bindings, Snippets, Build Systems, and so on) you can select Tools > Developer > Show Scope Name from the menu (see the menu for the key binding assigned to this) to see what the full scope is for the current cursor location.
As evidenced from the scope you mentioned in your question, scopes can be quite complex to allow you to dial in as much specificity as you want.
For the case of simple plain text, as evidenced by the command I mentioned above, the following is the example completions set to work in plain text:
{
"scope": "text.plain",
"completions":
[
{ "trigger": "a", "contents": "$0" },
{ "trigger": "abbr\t<abbr>", "contents": "<abbr>$0</abbr>" },
{ "trigger": "acronym", "contents": "<acronym>$0</acronym>" }
]
}
Note that along with the location of the file, the extension is also important, otherwise Sublime won't know what it's supposed to contain.

Customizing syntax highlighting in Visual Studio Code

I'm currently trying to write an extension for a new file type (ANTLR) and wonder how to change the colors used for syntax highlighting in Visual Studio Code. To me it looks as if that is not defined in the extension, but somewhere else. There is no preferences entry for colors nor did I find a CSS file which defines that (which I'd expect since vscode is using Electron). I also looked through the settings file vscode generated and files that came with it, but no clue either. Neither did a web search help. So, I'm kinda lost now.
Can someone give me some hints or point me to the relevant docs?
There are two concepts at play here:
language grammars, which turn a text file into tokens with different scopes, and
themes, which colorize those scopes in a (hopefully) eye-pleasing way.
If you're writing your own grammar, or converting from TextMate etc., there's a chance you're using different scopes than the ones defined by the theme. In that case, there won't be a clear distinction between the tokens you define, even if they are actually defined.
There are two ways out of this. First one is, extend a theme with your custom scopes and colour them however you want. Not really a good way to go, unless everyone using your language also likes your colour scheme. The other is, use the (limited set of) scopes already defined and colorized by VSCode and the theme authors. Chances are, your language is going to look good in your theme of choice, and good enough in others.
To give you an example, here's the comment scope as defined by the default dark VSCode theme.
"name": "Dark Visual Studio",
"settings": [
{
"scope": "comment",
"settings": {
"foreground": "#608b4e"
}
},
and here's the equivalent language snippet from the C++ grammar:
"comments": {
"patterns": [
{
"captures": {
"0": {
"name": "punctuation.definition.comment.java"
}
},
"match": "/\\*\\*/",
"name": "comment.block.empty.java"
},
Basically, the language defines multiple tokens under comment, as needed, and since the theme says that comment.* will be green, they all get colorized the same.
There is no need to patch the theme, from the official documentation:
To tune the editor's syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file
Besides simple token customization you can fully override the TextMate rules with a slightly more complex setting, for example:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "keyword.control.ref.latex",
"settings": {
"foreground": "#FF0000"
}
}
]
}
Syntax highlighting rules are stored in .plist files (or alternatively in .tmLanguage files). In those files different token types are declared for syntax highlighting:
What is a keyword?
What is a string literal?
What is a comment?
etc.
Take a look here to get more information about it: https://code.visualstudio.com/Docs/customization/colorizer
You do not define colors in .plist files!
The relation between token types and colors is done in color theme declarations.
Learn more about it here
https://code.visualstudio.com/Docs/customization/themes and here How to add theme in Visual Studio Code?
In general this document is also helpful when you try to extend VSCode: https://code.visualstudio.com/docs/extensionAPI/overview
You might consider using a color theme
Since VSCode 1.44 (March 2020), you now have:
Theme Support for Semantic Tokens
Color themes can now write rules to color semantic tokens reported by language extensions like TypeScript.
"semanticHighlighting": true,
"semanticTokenColors": {
"variable.declaration.readonly:java": { "foreground": "#00ff00" "fontStyle": "bold" }
}
The rule above defines that all declarations of readonly variables in Java should be colored green and bold
See the Semantic Highlighting Wiki Page for more information.