代碼語法塊通過使用Prism語法突出顯示器向核心代碼塊添加語法突出顯示支持來擴展WordPress的塊編輯器。
Prism語法熒光筆運行在前端加載的JavaScript來解析代碼塊并應用語法標記。CSS文件指定要應用于該標記的顏色和樣式。


默認語言(推薦)
如果你的網站主要以少數幾種語言為主的話,可以將下代碼添加到主題根目錄下的functions.php
文件的<?php
下面:
//設置默認的語言為PHP
function wpkj_code_syntax_default_lang(){
return 'php'; //將php修改為其他語言
}
add_filter( 'mkaz_code_syntax_default_lang', 'wpkj_code_syntax_default_lang' );
自定義顏色方案
默認的顏色主題是在一個漆黑的基礎斷Atom的一個黑暗的主題。如果要更改這款wordpress插件的默認高亮顏色,可以從Prism主題存儲庫下載新主題或創建自己的主題。
顏色主題是單個CSS文件,有兩種自定義方式:
- 插件將檢查文件的當前主題:
assets/prism/prism.css
并使用該文件(如果存在)。將自定義項添加到該位置的文件中,它將被使用。 - 如果您不喜歡該文件位置,則可以使用過濾器
mkaz_prism_css_path
并指定相對于要使用的主題的路徑。 - 如果您希望指定完整的URL,則可以使用過濾器
mkaz_prism_css_url
并為要使用的樣式表指定完整的URL。
添加過濾器以更改URL的示例,將以下內容添加到主題的function.php中
add_filter( 'mkaz_prism_css_url', function() {
return 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-hopscotch.css';
});
注意:如果您使用標題/文件名功能并自定義CSS,則需要針對棱鏡-標題名類應用自己的樣式。
自定義語言列表
使用過濾器mkaz_code_syntax_language_list
來自定義要在編輯器中顯示的語言列表。默認情況下,代碼語法塊顯示較短的流行語言列表,但Prism支持近200種語言,請參見list。
使用此過濾器可以擴展以支持所需的語言。另外,您可以使用過濾器將列表縮短為僅使用的語言,以便于選擇。
這是一個將列表縮短到較小集合的示例:
add_filter( 'mkaz_code_syntax_language_list', function() {
return array(
"bash" => "Bash",
"go" => "Go",
"html" => "HTML",
"javascript" => "JavaScript",
"json" => "JSON",
"markdown" => "Markdown",
"php" => "PHP",
"python" => "Python",
"jsx" => "React JSX",
"sass" => "Sass",
"sql" => "SQL",
"svg" => "SVG",
"toml" => "TOML",
"vim" => "vim",
"xml" => "XML",
"yaml" => "YAML",
);
} );
我可以覆蓋條件加載,以便資產始終加載嗎?
是的,請使用過濾器mkaz_code_syntax_force_loading
強制始終加載資產,否則請使用has_block進行檢查。
例:
add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );
相關推薦
如果您正在使用傳統的經典編輯器,那么您應該試試這款代碼高亮wordpress插件:
如果您不滿足這簡單的功能,可以用這款功能更強大的高亮插件,無論是傳統的經典編輯器還是先進的古登堡區塊編輯器,他都能搞定,豐富的功能設置項,讓您充分自定義您的代碼高亮外觀: