Enhanced Code Editor plugin

partial$misc/admon-premium-plugin.adoc

The Enhanced Code Editor plugin (advcode) provides an advanced code editor within {productname} that makes HTML editing more efficient for power users. The editor includes professional IDE features that are enabled by default:

Syntax color highlighting for HTML, CSS, and JavaScript
Bracket matching and code folding
Multiple selections and carets for efficient editing
Search and replace functionality
Dark or light mode toggle for code display
Font size adjustment controls
Full-screen mode for distraction-free editing

Note	Full-screen mode requires the Full screen plugin and the Enhanced Code Editor to be running in inline mode.

The difference between the Code and Enhanced Code Editor plugins

liveDemo::advcode[]

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advcode',
  toolbar: 'code'
});

partial$misc/bundling-guide-link.adoc

Enable full-screen mode

To enable the full-screen mode button in the Enhanced Code Editor, configure the plugin to run in inline mode and include the fullscreen plugin:

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  advcode_inline: true,
  plugins: [
    "fullscreen", "advcode",
  ],
  toolbar: "code"
});