讓你的程式碼瞬間變美！Code Block Pro外掛詳細介紹

外掛資訊

官網:https://code-block-pro.com

wordpress外掛搜尋code bloc pro可找到

這是一個專為程式碼高亮度設計的外掛，它使用VS Code引擎來達成這個目的，讓你的程式碼看起來更加美觀且易於理解。以下是一些主要的功能特色：

1. 多種主題選擇：
   Code Block Pro內建超過25種主題，讓你可以根據自己的喜好來選擇。
2. 支援多種程式語言：
   這個外掛支援超過140種程式語言的高亮度顯示，無論你是使用哪種語言，都能找到適合的高亮度設定。
3. 行號顯示：
   Code Block Pro可以顯示程式碼的行號，讓你更容易找到程式碼的位置。
4. 行高亮度：
   你可以選擇讓某一行或多行程式碼高亮度顯示，這對於強調某部分程式碼非常有用。
5. 模糊高亮度：
   這是一個獨特的功能，你可以讓某部分程式碼模糊顯示，然後當滑鼠移過去時再顯示清楚，這可以讓讀者更專注於重點部分。
6. 複製按鈕：
   Code Block Pro提供了一個複製按鈕，讓讀者可以輕鬆複製你的程式碼。
7. 自訂字體和主題：
   你可以自訂程式碼的字體和主題，讓程式碼更符合你的風格。
8. 內建的Gutenberg區塊：
   這個外掛提供了一個內建的Gutenberg區塊，讓你可以在WordPress的編輯器中直接使用。

以上就是Code Block Pro的一些主要功能，它是一個非常實用且功能強大的WordPress外掛，對於需要在網站上展示程式碼的人來說，絕對是一個必備的工具。

Demo

下面是簡單的demo，預設用wordpress的<code></code>是這樣

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

const Save = () => {
    const bProps = useBlockProps
        .save({ style });
    return (
        <div { ...blockProps }>
            { __( 'Hi Mom!' ) }
        </div>
    );
};
export default Save;

Code Block Pro顯示是這樣

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

const Save = () => {
    const bProps = useBlockProps
        .save({ style });
    return (
        <div { ...blockProps }>
            { __( 'Hi Mom!' ) }
        </div>
    );
};
export default Save;

如果想看更詳細的介紹歡迎留言喔