2.5K



外掛資訊
wordpress外掛搜尋code bloc pro可找到

這是一個專為程式碼高亮度設計的外掛,它使用VS Code引擎來達成這個目的,讓你的程式碼看起來更加美觀且易於理解。以下是一些主要的功能特色:
- 多種主題選擇:
Code Block Pro內建超過25種主題,讓你可以根據自己的喜好來選擇。 - 支援多種程式語言:
這個外掛支援超過140種程式語言的高亮度顯示,無論你是使用哪種語言,都能找到適合的高亮度設定。 - 行號顯示:
Code Block Pro可以顯示程式碼的行號,讓你更容易找到程式碼的位置。 - 行高亮度:
你可以選擇讓某一行或多行程式碼高亮度顯示,這對於強調某部分程式碼非常有用。
- 模糊高亮度:
這是一個獨特的功能,你可以讓某部分程式碼模糊顯示,然後當滑鼠移過去時再顯示清楚,這可以讓讀者更專注於重點部分。
- 複製按鈕:
Code Block Pro提供了一個複製按鈕,讓讀者可以輕鬆複製你的程式碼。
- 自訂字體和主題:
你可以自訂程式碼的字體和主題,讓程式碼更符合你的風格。 - 內建的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;如果想看更詳細的介紹歡迎留言喔
探索更多來自 雖然沒準備什麼資料 的內容
訂閱即可透過電子郵件收到最新文章。