Syntaxer is a Figma plugin that allows you to color your text like syntax highlighting in Visual Studio Code. It uses the Shiki library to provide accurate and beautiful syntax highlighting for various programming languages.
- Syntax highlighting for multiple programming languages
- VS Code-like color schemes using Shiki
- Easy-to-use interface within Figma
- Open Figma and go to the Community tab
- Search for "Syntaxer"
- Click "Install"
- Select the text layer you want to apply highlighting to
- Open the Syntaxer
- Select a color theme
- Select a language
- Click "Apply Highlighting"
Syntaxer supports a wide range of programming languages, including but not limited to:
- ABAP
- ActionScript 3
- Ada
- Apache
- Apex
- APL
- AppleScript
- Ara
- ASM
- Astro
- AWK
- Ballerina
- BAT
- Beancount
- Berry
- BibTeX
- Bicep
- Blade
- C
- Cadence
- Clarity
- Clojure
- CMake
- COBOL
- CodeQL
- CoffeeScript
- C++ Macro
- C++
- Crystal
- C#
- CSS
- CSV
- CUE
- Cypher
- D
- Dart
- DAX
- Diff
- Docker
- Dream Maker
- Elixir
- Elm
- ERB
- Erlang
- Fish
- F#
- GDResource
- GDScript
- GDShader
- Gherkin
- Git Commit
- Git Rebase
- Glimmer.js
- Glimmer.ts
- GLSL
- Gnuplot
- Go
- GraphQL
- Groovy
- Hack
- Haml
- Handlebars
- Haskell
- HCL
- HJSON
- HLSL
- HTML
- HTTP
- Imba
- INI
- Java
- JavaScript
- Jinja HTML
- Jinja
- Jison
- JSON
- JSON5
- JSONC
- JSONL
- Jsonnet
- JSSM
- JSX
- Julia
- Kotlin
- Kusto
- LaTeX
- LESS
- Liquid
- Lisp
- Logo
- Lua
- Make
- Markdown
- Marko
- MATLAB
- MDC
- MDX
- Mermaid
- Mojo
- Narrat
- Nextflow
- Nginx
- Nim
- Nix
- Nushell
- Objective-C
- Objective-C++
- OCaml
- Pascal
- Perl
- PHP HTML
- PHP
- PL/SQL
- PostCSS
- PowerQuery
- PowerShell
- Prisma
- Prolog
- Proto
- Pug
- Puppet
- PureScript
- Python
- R
- Raku
- Razor
- Reg
- Rel
- RISC-V
- reStructuredText
- Ruby
- Rust
- SAS
- SASS
- Scala
- Scheme
- SCSS
- ShaderLab
- Shell Script
- Shell Session
- Smalltalk
- Solidity
- SPARQL
- Splunk
- SQL
- SSH Config
- Stata
- Stylus
- Svelte
- Swift
- SystemVerilog
- TASL
- TCL
- TeX
- TOML
- TSX
- Turtle
- Twig
- TypeScript
- V
- VB
- Verilog
- VHDL
- VimL
- Vue HTML
- Vue
- Vyper
- WASM
- Wenyan
- WGSL
- Wolfram
- XML
- XSL
- YAML
- ZenScript
Choose from popular VS Code themes, such as:
- Light+
- Dark+
- Dracula
- Dracula Soft
- GitHub Dark
- GitHub Dark Dimmed
- GitHub Light
- Material Theme
- Material Theme Darker
- Material Theme Lighter
- Material Theme Ocean
- Material Theme Palenight
- Min Dark
- Min Light
- Monokai
- Nord
- One Dark Pro
- Poimandres
- Rose Pine
- Rose Pine Dawn
- Rose Pine Moon
- Slack Dark
- Slack Ochin
- Solarized Dark
- Solarized Light
- Vitesse Black
- Vitesse Dark
- Vitesse Light
If you want to modify or contribute to the plugin:
- Clone this repository
- Install dependencies:
npm install - Make your changes in the
code.tsfile - Compile TypeScript to JavaScript:
npm run build - Load the plugin in Figma by selecting "Plugins" > "Development" > "Import plugin from manifest..."
We welcome feedback and contributions! Please open an issue or submit a pull request on our GitHub repository.
This project is licensed under the MIT License.