visual-studio-codemarkdown

Can VS Code dynamically apply the correct syntax highlighting for nested code of a different language than its surroundings, in a sigle code block?


Say that I'm viewing a Markdown file with the the undermentioned content:

```.IPYNB
{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "powershell"
    }
   },
   "outputs": [],
   "source": [
    "Invoke-WebRequest -URI 'https://dub.sh/zza' | ConvertFrom-JSON | Select-Object -ExpandProperty bio"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
```

This contains 3 different types of code:

  1. The undermentioned markup:

    ```.IPYNB
    ```
    

    ...is obviously Markdown;

  2. The proceeding .JSON is Jupyter Notebook content (hence the .IPYNB); and

  3. The content of the .IPYNB file is Markdown containing PowerShell Core (hence the .PS1) code.

This is a complex example, but it demonstrates the need for, say, VS Code to be able to intelligently parse these formats to provide syntax highlighting. Is this possible to enable, via an extension or preference?

I ask this because GitHub is actually capable of this to an extent already. For instance, https://github.com/microsoft/vscode-discussions/discussions/937#discussion-5874181 displays:

enter image description here

(albeit solely when rendered).


Solution

  • Non-Nested

    The solution to the lack of syntax highlighting in general in VS Code was to not utilize the file extension delimiter before the language name. The correct format would consequently be the undermentioned:

    ```IPYNB
    {"key": "value"}
    ```
    
    Nested

    The aforementioned doesn't enable VS Code to display the value of the "source" key with the correct syntax highlighting for PowerShell code.

    However, this is possible if one writes an extension which does so, for the HTML syntax highlighting renders inline CSS with the correct syntax highlighting, as it does for PHP, inline via a (specification-invalid) XML preprocessor directive.