Rich Text Formats vs CodeMirror Blocks

BlaBlaBlocks Formats lets you enhance your Gutenberg editor with interactive rich text formats like tooltips, markers, inline typography controls, and formatting utilities directly inside WordPress. No coding needed. Just select your text, choose a format, and instantly make your content more engaging. With BlaBlaBlocks Formats, you can add animated markers, interactive tooltips, inline typography styling, and quick formatting controls to improve readability and emphasize key information. Key Features Interactive text formats – Add InfoTips, markers, typography controls, and clear formatting directly from the block toolbar. Live customization – Change color, animation, and behavior in real time. Lightweight & optimized – Assets load only when formats are used. Native Gutenberg integration – Seamlessly fits the WordPress Block Editor. Why Choose BlaBlaBlocks Formats? Because plain text doesn’t always tell the full story! Highlight key phrases, provide helpful InfoTips, adjust inline typography, or quickly remove formatting, all within the familiar block editor UI. No shortcodes or custom HTML needed. 100% visual control inside the editor. Works with all themes and blocks. How It Works Select any text in the Gutenberg editor. Choose a format such as Marker, InfoTip, Typography, or Clear formatting. Adjust style and behavior using the sidebar options. See the preview instantly. Formats are rendered on both editor and frontend views with minimal code overhead. Use Cases Add InfoTips to glossary terms or product details. Highlight important phrases in tutorials or documentation. Apply inline typography styles to emphasize selected text. Clear unwanted formatting from copied or edited content. Available Formats 1. Marker Underline or highlight text segments with customizable color and animation. 2. InfoTip Attach informative tooltips to any text selection perfect for definitions, links, or extra context. 3. Typography Apply inline typography styles such as font family, font size, appearance, letter spacing, and letter case. 4. Clear formatting Remove applied inline formatting from selected text with a single toolbar action. Customization Options Marker color & animation style Tooltip position, size, and behavior Typography presets and inline text styling Backend-only or frontend-visible options Per-format settings saved automatically Performance & Optimization BlaBlaBlocks Formats loads assets only when necessary, reducing frontend bloat. No React, Redux, or large JS libraries Powered by the web component, not loaded on the public site unless formats are active. Open Source and Free The BlaBlaBlocks Formats is open source. Not only is it free to use, but you are also welcome to collaborate and contribute to its development. Source Code: https://github.com/lubusIN/blablablocks-formats Report Issues: https://github.com/lubusIN/blablablocks-formats/issues Documentation: https://github.com/lubusIN/blablablocks-formats/wiki

CodeMirror Blocks is useful for developers blog, tutorial site where to display formatted (highlighted) code of any program. It supports 100+ Programming, Scripting and MarkUp Language, with 56 Different Themes. The Code Block is dependent on a CodeMirror library. Formatted Code Block is like (syntax highlighting feature) that displays source code, in different colors and fonts according to the category of terms. It is one strategy to improve the readability and context of the text; especially for code that spans several pages. The reader can easily ignore large sections of comments or code, depending on what they are looking for. This plugin is just plug and play, no tedious configurations or hacks, just install, activate and start using block inserter. Features Control Panel Added on top of the Code Block. ** It displays language/filename. ** It also display three buttons, includes Run/Execute, FullScreen, Copy Code. Web editor (Execution of HTML, CSS JavaScript block) With CodeMirror Block 1.1 Option Page for set default options Highlight Active Line (now available on CodeMirror Block 1.1) CodeMirror Block 1.1 now support Block align (Wide Width, Full Width) if your theme Supports. Classic Editor Support (Partial) Lightweight and fast Secure code with using clear coding standards Intuitive interface with many settings Cross browser compatible (work smooth in any modern browser) Works also on android mobile browser Compatible with all Default WordPress themes (tested with Latest Twenty Twenty-Four) Twenty Twenty-Four Twenty Twenty-Three Twenty Twenty-Two Twenty Twenty-One Twenty Twenty Also Compatible with other third-party themes. Key features include Code syntax highlighting Line number (On/Off) option 56 Themes (all provided themes from CodeMirror) 100+ Programming languages (all most provided languages from CodeMirror) Programming language selection option Loading CodeMirror files on pages only when needed A list of supported themes: 3024 day 3024 night Ambiance mobile Ambiance Base16 dark Base16 light Blackboard Cobalt Colorforth Eclipse Elegant Erlang dark Lesser dark Liquibyte MBO MDN-like Midnight Monokai Neat Neo Night Paraiso dark Paraiso light Pastel on dark Rubyblue Reactjs.org Theme Solarized The matrix Tomorrow night bright Tomorrow night eighties TTCN Twilight Vibrant ink XQ dark XQ light Zenburn Credits This Plugin use CodeMirror library to highlight Code Blocks. CodeMirror is an open-source project shared under the MIT license.