Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: add support for highlighting syntax in Markdown previews #5

Conversation

marcusrbrown
Copy link
Sponsor Collaborator

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

image

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
Copy link
Owner

🔥 🔥 🔥

@marcusrbrown
Copy link
Sponsor Collaborator Author

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

@marcusrbrown marcusrbrown marked this pull request as ready for review December 4, 2020 21:11
@thejustinwalsh
Copy link
Owner

thejustinwalsh commented Dec 4, 2020

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

@marcusrbrown
Copy link
Sponsor Collaborator Author

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

@thejustinwalsh
Copy link
Owner

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.

@thejustinwalsh thejustinwalsh added the enhancement New feature or request label Dec 4, 2020
@marcusrbrown marcusrbrown force-pushed the feat/markdown-preview-highlight branch from da13def to 5411059 Compare December 4, 2020 21:28
package.json Outdated
@@ -33,7 +35,7 @@
"Protocol Buffer Text Format",
"Textual Protobuf",
"pbtxt",
"textproto"
"prototxt"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would also like to keep the textproto language in edition to prototxt. A search on GitHub reveals a very large number of textproto files as well.

Copy link
Sponsor Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Restored in 50b89f3.

@marcusrbrown marcusrbrown force-pushed the feat/markdown-preview-highlight branch 2 times, most recently from 21d28a3 to 98ed407 Compare December 7, 2020 06:59
@marcusrbrown marcusrbrown force-pushed the feat/markdown-preview-highlight branch from 53c9c6d to a6449b7 Compare December 7, 2020 07:44
@marcusrbrown
Copy link
Sponsor Collaborator Author

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 feature: add CI workflow #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
Copy link
Owner

Will get this rolled out ASAP! Thanks again!

@thejustinwalsh thejustinwalsh merged commit c28c490 into thejustinwalsh:main Dec 8, 2020
@marcusrbrown marcusrbrown deleted the feat/markdown-preview-highlight branch December 18, 2020 05:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants