https://github.com/KevinBatdorf/code-block-pro

A Gutenberg code block with syntax highlighting powered by VS Code
https://github.com/KevinBatdorf/code-block-pro

gutenberg gutenberg-blocks shiki syntax-highlighting vscode wordpress wordpress-plugin

Last synced: about 1 month ago
JSON representation

A Gutenberg code block with syntax highlighting powered by VS Code

• Host: GitHub
• URL: https://github.com/KevinBatdorf/code-block-pro
• Owner: KevinBatdorf
• Created: 2022-07-30T03:37:55.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-15T17:21:58.000Z (about 2 months ago)
• Last Synced: 2025-03-22T03:04:57.712Z (about 1 month ago)
• Topics: gutenberg, gutenberg-blocks, shiki, syntax-highlighting, vscode, wordpress, wordpress-plugin
• Language: TypeScript
• Homepage: https://code-block-pro.com
• Size: 12.5 MB
• Stars: 146
• Watchers: 2
• Forks: 14
• Open Issues: 54
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
Code highlighting powered by the VS Code engine

Read more at [code-block-pro.com](https://code-block-pro.com?utm_campaign=github&utm_source=gh-readme&utm_medium=textlink)

View all themes at [code-block-pro.com/themes](https://code-block-pro.com/themes?utm_campaign=themes&utm_source=gh-readme&utm_medium=textlink)

View this block plugin [on WordPress.org](https://wordpress.org/plugins/code-block-pro)

[![Twitter](https://img.shields.io/twitter/url/https/twitter.com/kevinbatdorf.svg?style=social&label=Follow%20%40kevinbatdorf)](https://twitter.com/kevinbatdorf)

## 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](.wordpress-org/screenshot-3.png 'Example 3')

![alt text](.wordpress-org/screenshot-4.png 'Example 4')

![alt text](.wordpress-org/screenshot-2.gif 'Example 2')