插件篇
Enlighter(不推薦)
地址:https://wordpress.org/plugins/enlighter/
Syntax-highlighting Code Block(不推薦)
這個插件不支持添加行號
高亮的效果也不太理想
插件:WP Code Highlight.js
在插件中心搜索並安裝 WP Code Highlight.js,啟用插件後,文章中的代碼便會自動進行高亮展示啦。
插件:SyntaxHighlighter -通用代碼高亮插件
插件:Syntaxhighlighter-通用代碼高亮插件
插件(推薦):Code Syntax Block-兼容古騰堡的代碼高亮插件
很多代碼插件都是添加了自己的區塊的,但是如果哪天禁用掉插件後,可能會導致已發布的文章出現問題,所以,如果是支持默認的【代碼】區塊,即使以後刪除了插件,已發布的代碼也不會出現問題。
Code Syntax Block使用
特點
1、完全兼容古騰堡的【代碼】區塊,讓你輕鬆的高亮代碼,無需其他操作
2、最簡單的WordPress代碼高亮插件
3、Code Syntax Block 採用的是 Prism 這個代碼高亮庫實現的
4、支持添加行號
【地址】:https://wordpress.org/plugins/code-syntax-block/
使用
一、添加古騰堡“代碼”格式
二、在古騰堡-區塊,可以進行一些設置
1)選擇語言:
2)設置是否顯示行號
3)設置:Title for Code Block
4)設置整體顏色方案(Global Color Scheme)
注意:所有站點都起作用(Color scheme applies to all code blocks across the site.)
三、設置默認語言
如果不選擇語言,html如下:
<pre class="wp-block-code"><code>代碼高亮</code></pre>
這樣顯示的內容和主題提供的樣式一樣,相當於沒有代碼高亮沒有起作用
選擇任何一個語言,則前端出現效果遵守主題的樣式,
html代碼:
<pre class="wp-block-code"><code lang="php" class="language-php">代碼高亮</code></pre>
所以,一般情況下,建議設置默認語言。
//設置默認的語言為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種語言
使用此過濾器可以擴展以支持所需的語言。另外,您可以使用過濾器將列表縮短為僅使用的語言,以便於選擇。
這是一個將列表縮短到較小集合的示例:
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",
);
} );
【參考閱讀】:https://www.npc.ink/2793.html
參考
插件:SyntaxHighlighter -通用代碼高亮插件
wordpress插件:Enlighter – WordPress代碼高亮插件
Code Snippets
https://wordpress.org/plugins/code-snippets/
WordPress代碼高亮插件CodeColorer正確使用方法
http://blog.csdn.net/razyliang/article/details/49406849
5款WordPress代碼高亮插件
http://blog.csdn.net/liuxuekai/article/details/52099931
WordPress 代碼高亮插件:Pure-Highlightjs(支持可視化下插入代碼)
https://www.wpdaxue.com/pure-highlightjs.html
12款最佳的 WordPress 語法高亮插件推薦
https://www.cnblogs.com/lhb25/p/12-best-wordpress-syntax-highlighter-plugins.html
14 Best WordPress Theme Frameworks 2017
https://athemes.com/collections/best-wordpress-theme-frameworks/