diff --git a/.wordpress-org/screenshot-3.png b/.wordpress-org/screenshot-3.png index 299fab1..02eaee7 100644 Binary files a/.wordpress-org/screenshot-3.png and b/.wordpress-org/screenshot-3.png differ diff --git a/.wordpress-org/screenshot-4.png b/.wordpress-org/screenshot-4.png index a5a4d72..7de3e15 100644 Binary files a/.wordpress-org/screenshot-4.png and b/.wordpress-org/screenshot-4.png differ diff --git a/README.md b/README.md index fbe93db..be763c2 100644 --- a/README.md +++ b/README.md @@ -5,17 +5,26 @@ Code highlighting powered by the VS Code engine View this block plugin [on WordPress.org](https://wordpress.org/plugins/code-block-pro) ## Features -- Includes 28 themes built in to choose from. +- Includes 25+ built-in themes to choose from. - Supports over 140 programming languages - Optionally load programming fonts -- Various header styles (more coming soon) +- Line numbers +- Line highlighting +- Blur highlighting +- Header styles (more coming) +- Footer styles (more coming) - Optionally add a copy button to let users copy the code - Native Gutenberg block output - no special requirements -- No frontend JavaScript required - works in headless mode +- 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-1.png "Example") -![alt text](.wordpress-org/screenshot-2.gif "Example 2") ![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") diff --git a/code-block-pro.php b/code-block-pro.php index 319083e..f91063c 100644 --- a/code-block-pro.php +++ b/code-block-pro.php @@ -4,7 +4,7 @@ * Description: Code highlighting powered by the VS Code engine * Requires at least: 6.0 * Requires PHP: 7.0 - * Version: 1.8.0 + * Version: 1.9.0 * Author: Kevin Batdorf * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html diff --git a/readme.txt b/readme.txt index 1b0e422..0c0a0bb 100644 --- a/readme.txt +++ b/readme.txt @@ -1,35 +1,42 @@ -=== Code Block Pro - Pixel Perfect Syntax Highlighting === +=== Code Block Pro - Beautiful Syntax Highlighting === Contributors: kbat82 -Tags: block, code, syntax, highlighting, snippet, highlighter, JavaScript, php, vs code, editor +Tags: block, code, syntax, highlighting, snippet, highlighter, JavaScript, php, vs code, editor, torchlight, shiki Tested up to: 6.1 -Stable tag: 1.8.0 +Stable tag: 1.9.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html -Code highlighting powered by the VS Code engine +Code highlighting powered by the VS Code engine. Highly performance. No bloat. == Description == -Show off your beautiful code. This plugin provides you with an editor that runs your code directly through the same rendering engine that is used by the popular VS Code editor. This block provides fast, native, code highlighting that renders perfectly in any language and theme supported by VS Code. +Show off your beautiful code, don't just display it! This block plugin provides you with a code block editor that runs your code directly through the same rendering engine that is used by the popular VS Code editor. This block provides fast, native, code highlighting that renders perfectly in any language and theme supported by VS Code. Beautiful syntax highlighting made easy. = Features = -- Includes 28 built-in themes to choose from. +- Includes 25+ built-in themes to choose from. - Supports over 140 programming languages - Optionally load programming fonts -- Line numbers (custom starting number) +- Line numbers +- Line highlighting +- Blur highlighting - Header styles (more coming) - Footer styles (more coming) - Optionally add a copy button to let users copy the code - Native Gutenberg block output - no special requirements -- No frontend JavaScript required - works in headless mode +- Core functionality works in headless mode (see FAQ) - Supports converting from the default code block = More info = - Follow [@kevinbatdorf](https://twitter.com/kevinbatdorf) on Twitter - View on [GitHub](https://github.com/KevinBatdorf/code-block-pro) += 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 + = Included VS Code Themes = - Dark Plus - Dracula Soft @@ -208,19 +215,30 @@ Beautiful syntax highlighting made easy. == Frequently Asked Questions == -= Font size is too small = += Font size is too small/big = Look under the "Styling" tab and turn on "Clamp Values", which will compute the rem values relative to a 16px-24px base * the selected rem values. e.g. clamp(20px, 1.25rem, 30px). += How to use in headless = + +Themes are rendered inside the editor as you type or make changes, so the code block itself will work without CSS or JavaScript. However, the font loading, copy button, and line highlighting require a tiny bit of JavaScript to funciton. Additionally, line blur uses a tiny bit of CSS which you will need to load in yourself or impliment your own. The code tokens and theme styles are inline though, so no need to manipulate the DOM. + == Screenshots == 1. Choose from more than 25 themes. 2. Customize fonts, themes, and behavior. -3. Example showing light theme with padding disabled. -4. Example showing a header with a string using Palenight theme. +3. Disable padding and inline the code for a fluent experience. +4. Use highlighting and blur to focus on parts of the code. == Changelog == += 1.9.0 - 2022-11-20 = +- Feature: Added line highlights +- Feature: Added blur effect to highlight lines +- Tweak: Added the copy button to the editor preview +- Tweak: Removed HC Light - will follow up on rendering issues +- Fix: Selected text no longer leaves padding exposed on the right + = 1.8.0 - 2022-11-17 = - Feature: Added footer styles - Accessibility: Increased line number color contrast diff --git a/src/block.json b/src/block.json index 269ed3f..51421a9 100644 --- a/src/block.json +++ b/src/block.json @@ -3,9 +3,9 @@ "apiVersion": 2, "name": "kevinbatdorf/code-block-pro", "version": "1.2.0", - "title": "Code Block Pro", + "title": "Code Block Pro - Beautiful syntax highlighting", "category": "common", - "description": "Code highlighting powered by the VS Code engine", + "description": "Code highlighting powered by the VS Code engine. No overhead.", "attributes": { "code": { "type": "string" }, "codeHTML": { "type": "string" }, diff --git a/src/editor/Edit.tsx b/src/editor/Edit.tsx index de4cf96..c0d5551 100644 --- a/src/editor/Edit.tsx +++ b/src/editor/Edit.tsx @@ -160,7 +160,7 @@ export const Edit = ({ top: disablePadding ? 0 : 16, bottom: disablePadding || hasFooter ? 0 : 16, left: - (disablePadding ? 0 : 16) + + (disablePadding && !lineNumbersWidth ? 0 : 16) + // If line numbers are disabled, just offset the 12px padding (lineNumbersWidth ?? -12) + 12, diff --git a/src/editor/editor.css b/src/editor/editor.css index 0cbfad3..27ef4f9 100644 --- a/src/editor/editor.css +++ b/src/editor/editor.css @@ -46,6 +46,9 @@ .code-block-pro-editor:not(.padding-disabled) pre .line:empty { @apply block; } +.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre .line:empty { + @apply block; +} .code-block-pro-editor.cbp-has-line-numbers pre .line:not(.cbp-line-number-disabled)::before { @apply inline-block text-right opacity-50 absolute; margin-right: 12px; @@ -57,10 +60,12 @@ left: calc(var(--cbp-line-number-width, 0) * -1 - 16px); } -.code-block-pro-editor.cbp-has-line-numbers.padding-disabled pre .line:not(.cbp-line-number-disabled)::before { - @apply static; +.code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre { + @apply p-0; +} +.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre { + @apply py-0; } - /* Will make sure the line numbers are full width before calculating */ .code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced, .code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-disabled { @@ -74,8 +79,11 @@ @apply pointer-events-none no-underline; } +/* Just to make it look similar to the front end */ .code-block-pro-editor pre .line.cbp-line-highlight::after { - /* Just to make it look similar to the front end */ + content: ''; + background: var(--cbp-line-highlight-color, rgb(14 165 233/.2)); + @apply absolute top-0 h-full; left: -100% !important; width: 1000%!important; min-height: var(--cbp-line-height) !important; diff --git a/src/front/front.js b/src/front/front.js index 43167f4..050613e 100644 --- a/src/front/front.js +++ b/src/front/front.js @@ -21,6 +21,47 @@ addEventListener('DOMContentLoaded', () => { }); }); +// Handle highlighter +addEventListener('DOMContentLoaded', () => { + const codeBlocks = Array.from( + document.querySelectorAll('.wp-block-kevinbatdorf-code-block-pro pre'), + ); + + codeBlocks.forEach((codeBlock) => { + // search for highlights + const highlighters = codeBlock.querySelectorAll('.cbp-line-highlight'); + if (!highlighters.length) return; + + // We need to track the block width so we can adjust the + // highlighter width in case of overflow + const resizeObserver = new ResizeObserver((entries) => { + entries.forEach((entry) => { + // get width of inner code block + const codeWidth = + entry.target.querySelector('code').offsetWidth; + const computed = + codeWidth + 16 === entry.target.scrollWidth + ? codeWidth + 16 + : entry.target.scrollWidth + 16; + codeBlock.style.setProperty('--cbp-block-width', '0'); + codeBlock.style.setProperty( + '--cbp-block-width', + `${computed}px`, + ); + }); + }); + resizeObserver.observe(codeBlock); + + // add the highlighter + highlighters.forEach((highlighter) => { + highlighter.insertAdjacentHTML( + 'beforeend', + '', + ); + }); + }); +}); + // Handle font loading addEventListener('DOMContentLoaded', () => { if (!window.codeBlockPro?.pluginUrl) return; diff --git a/src/front/style.css b/src/front/style.css index ad161f8..89c536d 100644 --- a/src/front/style.css +++ b/src/front/style.css @@ -20,7 +20,7 @@ font-family: inherit; @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none; } -.wp-block-kevinbatdorf-code-block-pro.padding-disabled pre { +.wp-block-kevinbatdorf-code-block-pro.padding-disabled:not(.code-block-pro-editor) pre { @apply p-0; } .wp-block-kevinbatdorf-code-block-pro.padding-bottom-disabled pre { @@ -61,10 +61,10 @@ /* .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(.code-block-pro-editor) pre code .line:hover::before { @apply opacity-100; } */ -.wp-block-kevinbatdorf-code-block-pro pre .line.cbp-line-highlight::after { - content: ''; +.wp-block-kevinbatdorf-code-block-pro pre .line.cbp-line-highlight .cbp-line-highlighter { background: var(--cbp-line-highlight-color, rgb(14 165 233/.2)); - width: calc(100% + 32px); + width: 100%; + min-width: calc(var(--cbp-block-width, 100%)); left: -16px; @apply absolute top-0 h-full; } diff --git a/src/util/arrayHelpers.ts b/src/util/arrayHelpers.ts index a64a954..6d5ca96 100644 --- a/src/util/arrayHelpers.ts +++ b/src/util/arrayHelpers.ts @@ -8,7 +8,7 @@ export const parseJSONArrayWithRanges = ( .map((inner: number | number[]) => { // offset by startingLineNumber const offset = isNaN(Number(startingLineNumber)) - ? 1 + ? 0 : Math.max(Number(startingLineNumber) - 1, 0); // incoming might look like 1, 3, or [4, 8] if (typeof inner === 'number') return inner - offset;