Custom HTML Block Extension

Description

Custom HTML Block Extension extends “Custom HTML block” to evolve into an advanced code editor.
There are 50 different color themes to choose from, and you can select the one that best suits your taste.
This plugin features Emmet that expand shortcut input into complete code. This reduces the number of times you have to type and saves keystrokes.
You can change all kinds of settings to create your ideal editor in advanced mode.

Resources

@monaco-editor/react

License: MIT License
Source: https://github.com/suren-atoyan/monaco-react

emmet-monaco-es

License: MIT License
Source: https://github.com/troy351/emmet-monaco-es

monaco-themes

License: MIT License
Source: https://github.com/brijeshb42/monaco-themes

webfontloader

License: Apache-2.0 License
Source: https://github.com/typekit/webfontloader

Web Font (Fira Code)

License: OFL-1.1 License
Source: https://github.com/tonsky/FiraCode

Web Font (Source Code Pro)

License: OFL-1.1 License
Source: https://github.com/adobe-fonts/source-code-pro

Web Font (Ubuntu Mono)

License: OFL-1.1 License
Source: https://ubuntu.com/legal/font-licence

Web Font (Anonymous Pro)

License: OFL License
Source: https://www.marksimonson.com/fonts/view/anonymous-pro

Screenshots

  • Custom HTML Block Extension
  • Various color themes
  • Faster coding with Emmet
  • High customizability

Installation

  1. Upload the custom-html-block-extension folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the \’Plugins\’ menu in WordPress.

Reviews

May 10, 2021
編集画面で負担なくコーディングができるようになりとても便利です。(Emmetが使える!) プラグイン独自のブロックではなく、WordPressコアのHTMLブロックでエディタが使えるようになるのがとても良いです。 オプションが充実していてテーマやインデントなど好みに設定できるのでいつも使っているVSCodeと同じ設定にして使ってみています。 あとは、なんと検索機能も使える...!優れたプラグインです。
Read all 4 reviews

Contributors & Developers

“Custom HTML Block Extension” is open source software. The following people have contributed to this plugin.

Contributors

“Custom HTML Block Extension” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Custom HTML Block Extension” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.0.1

  • Fix: Problem about browser console error and incorrectly margin-top of the code editor at classic editor

2.0.0

  • Doc: Update translation file
  • Add: Classic Editor support

1.2.1

  • Fix: Problem aoubt the cut/copy shortcut action does not work properly depending on the settings

1.2.0

  • Doc: Update translation file
  • Add: Import/Export editor config tool
  • Clean: Ajust internal logic

1.1.0

  • Doc: Update translation file
  • Doc: About how to add custom fonts
  • Add: Filter hook for adding custom fonts

1.0.3

  • Fix: Indent of the sample code in the editor config preview is not consistent with the settings
  • Fix: Incorrect HTML syntax in the sample code of the editor config preview
  • Clean: Ajust internal logic
  • Change: the range of some setting items
  • Style: Add space between the horizontal scroll bar and the handle of resizable box

1.0.2

  • Clean: Re-record and compress gif files

1.0.1

  • Clean: remove console.log
  • Clean: remove .eslintignore from .distignore

1.0.0

  • Initial release