Skip to content

A Gutenberg code block with syntax highlighting powered by VS Code

Notifications You must be signed in to change notification settings

kidunot89/code-block-pro

 
 

Repository files navigation

Code highlighting powered by the VS Code engine

Read more at code-block-pro.com

View all themes at code-block-pro.com/themes

View this block plugin on WordPress.org

Twitter

Features

  • Includes 25+ built-in themes to choose from.
  • Supports over 140 programming languages
  • Optionally load programming fonts
  • Line numbers
  • Line highlighting (static and on hover)
  • Blur highlighting (with reveal on hover)
  • Header styles
  • Footer styles
  • Optionally add a copy button to let users copy the code
  • Native Gutenberg block output - no special requirements
  • Core functionality works in headless mode (see FAQ)
  • Supports converting from the default code block

Tips

  • Try combining line highlighting with the blur effect to add some extra depth
  • All settings are per block, but some settings are remembered when you add the next block.
  • Add a link in the code footer (some footers support this, not all) that points to a https://codepen.io demo.

Example Screenshots

alt text alt text alt text

About

A Gutenberg code block with syntax highlighting powered by VS Code

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 64.7%
  • JavaScript 29.0%
  • CSS 4.1%
  • PHP 2.2%