Reference-style links in Visual Studio Code - visual-studio-code

I found that Markdown has something called reference-style links. I don't know if is it official Markdown syntax or it exists only in some Markdown add-ons.
I tried to create something like that in VSCode, but it doesn't work:
[Test][ducksearch]
[ducksearch]: https://duckduckgo.com
I wonder is it a bug/un-implemented function in VSCode or that syntax works only with some extension?

Reference-style links are part of the original Markdown specification. They should work just about everywhere Markdown does, and that includes Visual Studio Code.
Just add a blank line to separate the paragraph containing the link from the reference:
[Test][ducksearch]
[ducksearch]: https://duckduckgo.com

Not only reference-style links are supported natively by VSCode markdown editor, but VSCode 1.68 (May 2022) will enable "go to definition".
See issue 146293
Enable triggering go to definition on a markdown reference link to jump to the link definition
[text][link] // trigger on link here
[link]: https://example.com
Go to def (from text) should jump to the definition of link, at the end of the file
This is implemented in PR 148017, and available in the Insider edition right now.

Related

How to collapse/fold a link in Visual Studio Code Markdown?

It is hard to read a markdown document in Visual Code if it contains links with long URLs. Is there a way to collapse/fold link addresses?
As far as I can tell from looking through the markdown settings (you can try it yourself by triggering autocomplete/suggestions after typing markdownlink in a settings.json file), there is no setting that enables the behaviour you are looking for.
One possible workaround would be to just read the markdown preview (instead of the source markup). You can do this with the buttons at the top right, or with these commands and keyboard shortcuts:
Markdown: Open Preview (ctrl+shift+v)
Markdown: Open Preview to the Side (ctrl+k,v)
Markdown: Open Locked Preview to the Side
If you want the feature you are asking for, you can create a feature request on their GitHub issue tracker. If you do so, add a link here to the issue you create for posterity.

How to get vscode markdown to highlight OCaml code?

I cannot get my OCaml code block highlight in vscode markdown files. The default syntax to specify language is language where you can put the name of the language to get highlighted. I cannot find the documentation for the keywords for OCaml. .ml files do have highlights.
Regarding markdown, adding ml to the backtick fence should be enough, since VSCode uses highlight.js, and this library does list its supported languages.
With VSCode 1.71 (Aug. 2021), you can even specify triple-backtick code blocks with more than just a language identifier in the info string.
See PR 157947: "Allow markdown code blocks to contain data after language id". Released to VSCode insiders today.
(From issue 157793)
You need to install the OCaml Platform extension.

How can I list and edit js/css files linked in a master page in Visual Studio Code?

I've started to use Visual Studio Code instead of Dreamweaver and one of the things I loved about Dreamweaver is that it listed all the "Related" js/css/php files that were included/linked as href/src values in to the master page for quick editing.
Is there any way I can get this functionality in VSCode? I can't seem to find an extension that does this.
You can try the extension HTML Related Links.
Feel free to add feature requests.

open link in new tab with github markdown using target="_blank"

Is there a way to let a Link, written in githubs markdown, open in a new tab?
All posts I have found related to this suggests to use HTML and target="_blank", which is fine with me, but that doesn't work.
For example this link:
Go
Does not open in a new tab.
I'm no interested in replies for all kind of different markdown syntaxes, but only in a solution that will work when I write my markdown on github.
Well it seems that the simple answer is "It's not possible". Github does not include the target attribute even if you use plain HTML, so it's not a in the final HTML Anchor tag. Annoying, but OK, users can just do a CTRL+click (on Windows and Linux) or CMD+click (on MacOS) on the link, the get the same behavior.
There is a solution specific to websites using GitHub pages: adding line
markdown: kramdown
to file _config.yml, you can use [go](http://stackoverflow.com){:target="_blank" rel="noopener"} because then GitHub pages engine uses another markdown called kramdown for generating html. However, it does not work on previews and in markdown rendered by GitHub directly in the project repository.
From what I have read and researched, it is not possible. I wanted to do something similar but soon realized that it is not a feature in git md, unfortunately.
It's possible for Github Pages users (Jekyll), the proper way (March 2022) is to add to your _config.yml file these lines:
kramdown:
input: Kramdown
This is specified in the documentation:
You can also change the processor used by Kramdown (as specified for the input key in the Kramdown RDoc). For example, to use the non-GFM Kramdown processor in Jekyll, add the following to your configuration.
Use the Kramdown processor instead of GFM will allow you to add {:target="_blank" rel="noopener"} to markdown links to tell the browser to open link in new tab.
Example
[Stackoverflow The Key](https://stackoverflow.blog/2021/03/31/the-key-copy-paste/){:target="_blank" rel="noopener"}
/!\ Disclaimer
Changing the markdown processor from GFM (default value) to kramdown can create issues in the HTML result, since all the specific features of GitHub Flavored Markdown (GFM) won't work anymore.
The answer should be what #Idavid posted in a comment.
[go](http://stackoverflow.com){:target="_blank"}.
You should also add rel="noopener"
[go](http://stackoverflow.com){:target="_blank" rel="noopener"}

How can I enable IntelliSense for JavaScript inside HTML?

I want to use VS Code to try out the examples of a JavaScript book, but there's no IntelliSense, or at least I don't know how to activate it.
In Visual Studio this feature works out of the box :
But in VS Code, all I got is a message saying "No suggestions."
What do I need to do to enable IntelliSense in VS Code?
Starting with the November 2016 (version 1.8) release, Visual Studio Code now fully supports IntelliSense for JavaScript in HTML.
Note that the language support doesn't follow script includes, it only knows about definitions made in the same file.
Currently Unsupported
JS intellisense doesnt work in HTML script tag - VSCode GitHub Issues #4369
Smart Javascript suggestions inside HTML files no loger working after Visual Studio Code update - StackOverflow
It worked for me, when the file had a .js extension. I didn't get any intellisense when I pasted it into .html file between script tags.
Edit To Add: You can also change the Language Mode by clicking 'HTML' in the bottom of the VS Code window and change it to 'JavaScript'.
It is supported!
Intellisense and syntax highlighting start working after replacing
<script>something()</script>
with
<script type="text/javascript">something()</script>
Make sure you have HTML language mode selected in the bottom right corner. I had Markdown mode set for an unknown reason (autodetect?) and it didn't work for me. Javascript mode won't work either for HTML files.
Visual Studio Code version 1.4.0 does not support CSS intelli-sense.
I have an extension for CSS style, id and class intelli-sense for html documents:
Features:
Style tag completion and hover.
Style attribute completion and hover.
Id attribute completion.
Class attribute completion.
Scans workspace folder for css files.
Supports optional resource.json file for fine tuned resource selection.
Link:
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css