feature: add support for highlighting syntax in Markdown previews

[marcusrbrown]

This adds support of highlighting syntax within fenced code blocks in Markdown preview Web Views.

The biggest impact of this change is the extension now includes a code bundle. I do not make any effort to optimize the size of the bundle in this PR, I will add that feature in a separate one. Until that happens, packaging the extension will result in the following message:

$ vsce package
This extension consists of 419 files, out of which 197 are JavaScript files. For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore
 DONE  Packaged: /Users/mrbrown/github/igetgames/textproto-grammar/textproto-grammer-0.0.4.vsix (419 files, 878.4KB)

Note that the majority of these files come from Highlight.js to support other languages and themese. Bundling support will remove these extra files and minify the extension code, which will drastically reduce the extension size.

The Highlight.js language definition will need to be improved, I plan to tackle this when I circle back to update the TextMate grammar to be more correct. The version I included here is just to demonstrate the syntax highlighting working in the webview.

[thejustinwalsh]

🔥 🔥 🔥

[marcusrbrown]

I guess there isn't anything to hold off on, I'll get going on adding support for bundling.

[thejustinwalsh]

Maybe bundle with rollup to be cute? 🤣 Pros: API is slick, used it once, it's not Webpack. Cons: 🤷‍♂️ it's not Webpack.

[marcusrbrown]

I'll give it shot with rollup. Most extensions use Wepback, but I believe that is preference.

[thejustinwalsh]

The docs in the link about bundling from MS show you how to do it with WebPack so obviously I want to do it with rollup now... No preference either way tbh.

[marcusrbrown]

Ok, this one is good for review. Summary of changes over the last couple of days:

• Added support for bundling the extension with Rollup. The size of the packaged extension is now around 219KB. In production builds Terser is used to shrink the bundle. There are more options to play with there but the minified JavaScript bundle is only 20KB (69KB full size). The largest asset in the extension is the animated GIF used in README.md:

  $ unzip -l textproto-grammer-0.0.4.vsix 
  Archive:  textproto-grammer-0.0.4.vsix
  Length      Date    Time    Name
  ---------  ---------- -----   ----
   2872  12-07-2020 00:53   extension.vsixmanifest
    516  12-07-2020 00:53   [Content_Types].xml
  20435  12-07-2020 00:53   extension/bundle.js
    406  12-07-2020 00:53   extension/CHANGELOG.md
  213731  12-02-2020 15:21   extension/images/highlight-reel.gif
  15171  12-02-2020 15:21   extension/images/icon.png
    881  12-03-2020 20:58   extension/language-configuration.json
   1069  12-02-2020 15:21   extension/LICENSE.txt
   3180  12-07-2020 00:43   extension/package.json
    367  12-07-2020 00:53   extension/README.md
   1426  12-03-2020 11:22   extension/syntaxes/codeblock.json
   8242  12-03-2020 20:58   extension/syntaxes/textproto.tmLanguage.json
  ---------                     -------
  268296                     12 files

• Added npm scripts and VS Code editor lifecycle support. You can hit Cmd+Shift+B while editing to start Rollup in watch mode, or hit F5 to launch the debugger and Rollup will remain in watch mode until you kill it. Source maps are supported in development builds only.
• Fleshed out a better CI workflow. The CI workflow introduced in #4 now has jobs for publishing to the VS Code Marketplace and creating a GitHub release after pushing a version tag. You should be able to just do:

  npm version
  git push origin --tags

  which will trigger the publish and release jobs.

[thejustinwalsh]

Will get this rolled out ASAP! Thanks again!