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
    {
     "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
    }
    ```
    
    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, I've come to realize that that might be impossible:

    1. In a heuristic way, because the RegEx would be impossibly complex.
    2. Using some kind of LLM, because the highlighting would be too inconsistent.