mirror of
https://codeberg.org/vlw/code-export-syntax.git
synced 2025-11-05 04:22:43 +01:00
30 lines
No EOL
2.3 KiB
Markdown
30 lines
No EOL
2.3 KiB
Markdown
# Export syntax highlighting from [code-server](https://github.com/coder/code-server)
|
|
Most syntax highlighting libraries on the web try to implement their own parser, often with mixed results. This is an extension for Chromium-based browsers that allow you to edit and export code with syntax highlighting using a real language server from [code-server](https://github.com/coder/code-server). Code-server is a fork of Visual Studio Code that runs entierly in the browser or as a PWA.
|
|
|
|
Any language supported by code-server (VSCode) either built in or with an extension is supported. The markdown generated by code-server is exported as raw HTML with classnames on spans that determine syntax highlighting. This extension also allows you to edit the syntax highlighting of your code before exporting.
|
|
|
|
<video autoplay muted loop controls src="https://web.archive.org/web/20251018162623if_/https://blob.vlw.se/0.mp4"></video>
|
|
|
|
# Installation
|
|
1. [**Download the latest .crx file here**](/vlw/code-export-syntax/releases/download/latest/code-export-syntax.crx)
|
|
2. Navigate to [`chrome://extensions/`](chrome://extensions/)
|
|
3. Enable "Developer mode" (top right corner of the page)
|
|
4. Drag and drop the .crx file you downloded in step 1 onto this page
|
|
|
|
# Other features
|
|
Besides just exporting code from code-server, this extension comes with an editor that can be used to change various things before exporting.
|
|
|
|
## Change color and text
|
|
Text and syntax highlighting color can be changed.
|
|
|
|
<video autoplay muted loop controls src="https://web.archive.org/web/20251018163034if_/https://blob.vlw.se/1.mp4"></video>
|
|
|
|
# Split and join spans
|
|
The spans which control which color text should have can be split at the cursor to create another span which can be formatted seperately. Seperate spans can also be merged by joining together with a span to the left of the target span.
|
|
|
|
<video autoplay muted loop controls src="https://web.archive.org/web/20251018163326if_/https://blob.vlw.se/2.mp4"></video>
|
|
|
|
# Highlight and delete spans
|
|
All spans can be highlighted for an easier overview. Empty spans (no innerText at all) are automatically highlighted and can be removed by [joining to the left](#split-and-join-spans).
|
|
|
|
<video autoplay muted loop controls src="https://web.archive.org/web/20251018163435if_/https://blob.vlw.se/3.mp4"></video> |