Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 23 hours ago
JSON representation

A Gutenberg code block with syntax highlighting powered by VS Code

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')