redcocker

<p>Just another code syntaxhighligher for the theme and plugin editor with CodeMirror. This plugin can highlight sourcecodes in the theme/plugin editor and provide a useful toolbar.</p>
<h4>Features</h4>
<ul>
<li>Highlight sourcecodes in theme and plugin editor on the dashboard.</li>
<li>Based on Marijn Haverbeke’s “<a href="http://codemirror.net/" title="CodeMirrorr" rel="nofollow ugc">CodeMirror</a>” JavaScript library.</li>
<li>Built-in 10 themes.</li>
<li>Useful toolbar which includes search/replace features.</li>
<li>Full-screen editing.</li>
<li>Auto-complete.</li>
<li>Easy to configure features through the setting panel.</li>
<li>Localization: English(Default), 日本語(Japanese, UTF-8).</li>
</ul>
<h4>Support languages</h4>
<ul>
<li>PHP</li>
<li>CSS</li>
<li>Javascript</li>
<li>(X)HTML</li>
</ul>
<h4>Recommended plugin</h4>
<ul>
<li>“<a href="https://wordpress.org/extend/plugins/wp-syntaxhighlighter/" title="WP SyntaxHighlighter" rel="ugc">WP SyntaxHighlighter</a>” can highlight sourcecodes on your front-end(posts, pages, comments).</li>
</ul>


CodeMirror for CodeEditor

Just another code syntaxhighligher for the theme and plugin editor with CodeMirror.

K's Art Office

<p>KayzArt Live Code Editor provides a dedicated editor for building HTML, CSS, and JavaScript snippets with a live preview. It adds a “KayzArt” custom post type, opens new KayzArt posts in the editor, and adds an “Edit with KayzArt” button to the standard editor.</p>
<p>Features:<br />
* Custom KayzArt post type and dedicated editor<br />
* CodeMirror 6 editor with HTML/CSS/JS tabs and live iframe preview<br />
* JavaScript ES Module support with execution type switch (Classic / Module)<br />
* Setup wizard (Normal/Tailwind/Import JSON) with per-post mode lock<br />
* Tailwind mode with on-demand Tailwind CSS v4 compilation<br />
* Import/export JSON projects<br />
* Per-post template mode control: Default/Standalone/Theme<br />
* External scripts/styles (https only), live edit highlight, real-time DOM selection, and optional Shadow DOM isolation<br />
* External embedding (enable in settings): [kayzart post_id=”123″]<br />
* Allowlist for shortcode execution inside external embeds (one shortcode tag per line)<br />
* Optional single-page disable for external-embed output</p>
<p>External connections and privacy:<br />
* By default, KayzArt does not load external scripts or styles and does not send telemetry.<br />
* External requests happen only when an authorized user explicitly adds external HTTPS URLs in KayzArt settings.<br />
* Added external resources are requested both in preview and on front-end output where the KayzArt content is rendered.<br />
* Add only trusted URLs.</p>
<p>Development repository and build:<br />
* Source repository: https://github.com/ksartoffice/kayzart-live-code-editor<br />
* Generated files used by WordPress: assets/dist/main.js and assets/dist/style.css<br />
* Source files for generated assets: src/admin/main.ts, src/admin/style.css, and related files under src/admin/<br />
* Build configuration files: package.json, package-lock.json, vite.config.ts, tsconfig.json<br />
* Build steps:<br />
1. npm install<br />
2. composer install<br />
3. npm run build<br />
4. npm run plugin-zip</p>
<h3>Credits</h3>
<p>This plugin bundles third-party libraries:<br />
* CodeMirror – MIT License – https://github.com/codemirror<br />
* Emmet CodeMirror 6 Plugin – MIT License – https://github.com/emmetio/codemirror6-plugin<br />
* TailwindPHP (fork) – MIT License – https://github.com/ksartoffice/tailwindphp (upstream: https://github.com/dnnsjsk/tailwindphp)</p>


KayzArt Live Code Editor

KayzArt Live Code Editor - Live HTML/CSS/JS Editor with Tailwind CSS v4 support.

CodeMirror for CodeEditor vs KayzArt Live Code Editor