前言介紹
- 這款 WordPress 外掛「Code Snippet DM」是 2018-08-29 上架。
- 目前有 600 個安裝啟用數。
- 上一次更新是 2024-04-03，距離現在已有 396 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 4 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
necroob |
外掛標籤
code | embed | snippet | code snippet | display code |
內容簡介
在您的內容中以時尚的方式顯示您的程式碼片段。此外，該外掛程式還使用短代碼和直觀的 TinyMCE 介面。
Code Snippet DM 受到專案 Carbon 的啟發。
我們創建了一種簡單的方式來顯示您的程式碼片段，同時也可以控制其外觀，從而使其更時尚。
此外，在前端的右上角，您會發現一個「複製程式碼」按鈕，可讓您複製整個程式碼片段到剪貼板。
該外掛程式提供了一個 TinyMCE 按鈕，允許您顯示代碼或使用短代碼的選項。
您可以開啟短代碼 [dm_code_snippet]，在內容中加入程式碼，並關閉它 [/dm_code_snippet]。
從版本2.0.1開始，該外掛程式提供支援用於自定義的 Gutenberg 區塊。它將繼續支援通過短代碼添加程式碼片段的默認方式。
Gutenberg 區塊
該區塊名稱為「Code Snippet DM」，可在 Gutenberg 區塊的嵌入區找到。可用於搜尋的關鍵字：code、snippet、dm。
一旦在 Gutenberg 編輯器中添加了該區塊，就可以通過出現在每個區塊旁邊的側邊欄設置進行自定義。側邊欄將包括所有可用於短代碼的設置。其中一些設置將實時應用於您的編輯器中。
代碼樣式（語法突顯）僅在前端可用，在編輯器中，您將無法預覽代碼的正確顏色。
短代碼選項
您可以在短代碼中使用許多選項：
背景，帶有「yes」或「no」選項，將啟用/禁用顏色背景（默認「yes」）
background-mobile，帶有「yes」或「no」選項，將啟用/禁用移動設備的顏色背景（默認「yes」）
bg-color，接受任何 HEX、RGB 或 RGBA 值來更改背景顏色（默認為 #abb8c3）
主題，帶有「light」或「dark」選項，可更改代碼編輯器主題（默認「dark」）
瘦身，帶有「yes」或「no」選項，可將代碼編輯器從默認設置更改為精簡版本，非常適合單行程式碼（默認為「no」）
行數，帶有「yes」或「no」選項，將為列啟用左側行數（默認「no」）
語言，帶有「clike」、「css」、「javascript」、「markup」、「perl」、「php」、「python」、「ruby」、「sql」、「typescript」和「shell」選項，將基於您為代碼選擇的內容突顯語法（默認為「php」）
包裹，帶有「yes」或「no」選項，將包裝程式碼或添加水平捲動條以顯示它的格式（默認為「no」）
高度，允許您輸入任何值，並將代碼片段高度設置為該值。例如：500px。（默認為空白）
copy-text，這用於複製按鈕上顯示的文本。如果未添加，它將使用默認選項。（默認為「Copy Code」）
copy-confirmed，這用於單擊複製按鈕後顯示的文本。如果未添加，它將使用默認選項。（默認為「Copied」）
短代碼的示例：
[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="light" language="css" wrapped="no" height="500px" copy-text="Get the Code!" copy-confirmed="You have it!"]
.dm-code-snippet.dark {
background: $default-bg;
padding: 40px 35px 45px 35px;
margin: 30px 0;
}
[/dm_code_snippet]
重要提示：
* 如果您直接使用短代碼，請確保像上面的示例一樣在程式碼中包裝
* 如果您想使用短代碼添加 HTML，請確保在您的程式碼中使用實體字符（例如：<、>），以避免短代碼被解析。
原文外掛簡介
Supports: Gutenberg, Elementor, TinyMCE and shortcode
Display your code snippets in a stylish way inside your content. The plugin uses shortcodes and also very intuitive TinyMCE interface.
Starting with v2.0.3, the plugin offers support to be used via a custom Elementor Widget.
Starting with v2.0.1, the plugin offers support to be used via a custom Gutenberg block.
It will continue to support the default way of adding the code snippet via shotcodes.
Code Snippet DM was inspired by the Carbon project.
We created a simple way to display your code snippets but also have control over the way it appears, thus making it more stylish.
Also, on the front end in the top right you will find a Copy Code button that allows you to copy to clipboard the entired code snippet.
The plugin provides you with a TinyMCE button that will allow you to display the code or an option to use a shortcode.
You can open the shorcode [dm_code_snippet] and in the content inside and close it [/dm_code_snippet].
Elementor widget
The Widget is called “Code Snippet DM” and can be found on the Basic list of Elementor Widget after you activate the plugin. Keywords that can be used to find it: code, snippet, dm.
Once the widget is added in the Elementor editor, it can be customized via the sidebar settings that will appear for each widget. The sidebar will include all the settings that are available for the shortcode. Some of the settings will be applied in real time in your editor.
The code styling (syntax highlight) and line numbers are only available on the front-end, in the editor you will not be able to preview the correct colors for the code or the line numbers.
Gutenberg block
The block is called “Code Snippet DM” and can be found in the embed section of Gutenberg blocks. Keywords that can be used to find it: code, snippet, dm.
Once the block is added in the Gutenberg editor, it can be customized via the sidebar settings that will appear for each block. The sidebar will include all the settings that are available for the shortcode. Some of the settings will be applied in real time in your editor.
The code styling (syntax highlight) and line numbers are only available on the front-end, in the editor you will not be able to preview the correct colors for the code or the line numbers.
Shortcode Options
There are a number of options that you can use in the shortcode:
background with options yes or no will enable/disable the color background (Default yes)
background-mobile with options yes or no will enable/disable the color background for mobile devices (Default yes)
bg-color accepts any HEX, RGB or RGBA value to change the background color (Default #abb8c3)
theme with options light or dark that changes the code editor theme (Default dark)
slim with options yes or no that changes the code editor from default to a slim version, ideal for one-line code (Default no)
line-numbers with options yes or no that will enable a left side line number for columns (Default no)
language with options clike, css, javascript, markup, perl, php, python, ruby, sql, typescript, shell will highlight the syntaxes based on what you select for your code (Default php)
wrap with options yes or no will wrap the code or add a horizontal scroll bar to display it as it is (Default no)
height allows you to input any value and will set the code snippet height to that value. Example: 500px. (Default is empty)
copy-text this is used for the text shown on the copy button. If it’s not added it will use the default option. (Default Copy Code)
copy-confirmed this is used for the text shown after you click the copy button. If it’s not added it will use the default option. (Default Copied)
Example of shortcode:
[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="light" language="css" wrapped="no" height="500px" copy-text="Get the Code!" copy-confirmed="You have it!"]
.dm-code-snippet.dark {
background: $default-bg;
padding: 40px 35px 45px 35px;
margin: 30px 0;
}
[/dm_code_snippet]
Important:
* If you use the shortcode directly, make sure to wrap the code in
as in the example above.
* If you want to add HTML using the shortcode, you’ll need to escape the HTML before pasting it in the shortcode. (You can easily find an escape tool online to convert the code)
* If you have code (not HTML) that uses ‘’ and you add it with the shortcode and not the and the TinyMCE button, you will need to escape ‘’ from your code in order to properly display it.
Use the TinyMCE button if you don’t want to add the shortcode yourself. (see Screenshots)
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Code Snippet DM」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.2 | 1.3 | 1.3.1 | 1.3.2 | 1.3.4 | 1.3.5 | 1.3.6 | 2.0.1 | 2.0.2 | 2.0.3 |
延伸相關外掛（你可能也想知道）
WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager 》插入標頭和頁腳 + 完整的 WordPress 代碼片段外掛, WPCode (前稱为 WPBeginner 的 "插入標頭和頁腳"）是使用率超过 100 万个网站的 WordPress 代码片段外掛中...。
Code Snippets 》Code Snippets 是在您的網站上運行程式碼片段的簡單，清潔和簡單的方法。它消除了將自定義片段添加到您的佈景主題的 functions.php 檔案的需求。, 現在提供 C...。
Simple Custom CSS Plugin 》無需麻煩地將自訂 CSS 新增到 WordPress 網站中。, 這是一個易於使用的 WordPress 外掛，可以添加自訂 CSS 樣式以覆寫外掛和佈景主題的預設樣式。該外掛旨在...。
Shortcoder — Create Shortcodes for Anything 》Shortcoder 外掛可讓您建立 HTML、JavaScript、CSS 和其他代碼片段的自訂捷徑。現在，這些捷徑可以在文章/頁面中使用，並且該片段將取代其位置。, ✍ 輕鬆建立...。
Head & Footer Code 》Head & Footer Code 插件可以讓你在不是開發人員的情況下，添加自定義代碼片段（JavaScript、CSS 或 HTML）到網頁中。您可以將代碼放置在 （...。
Scripts n Styles 》這個外掛讓管理員用戶能夠將自訂的 CSS 和 JavaScript 直接添加到個別文章、頁面或任何註冊的自訂文章類型中，也可以將類別添加到 body 標籤和文章容器中。還...。
SyntaxHighlighter Evolved 》現在支援 WordPress 5.0 中的新區塊編輯器！, SyntaxHighlighter Evolved 讓您可以輕鬆地在網站上張貼帶有語法加亮功能的程式碼，而不會失去格式或做任何手動...。
Code Embed 》注意： WordPress 5.0 及以上版本的使用者請查看常見問題以了解如何在區塊編輯器中使用此外掛。, Code Embed 外掛允許您在文章中嵌入程式碼（JavaScript 和 H...。
PHP Everywhere 》注意：此外掛更新至 3.0.0 版本是一項重大變更，將移除 [php_everywhere] 短代碼和小工具。請透過外掛設定頁面中的升級嚮導，將原本的代碼轉換為 Gutenberg ...。
Highlighting Code Block 》「Highlighting Code Block」外掛可讓你以一個點擊的方式添加一個有語法突顯的程式碼區塊。, 它支援「區塊編輯器」和「傳統編輯器」。, （不過，我們建議在「...。
CSS & JavaScript Toolbox 》感謝您查看我們的程式碼片段外掛。我相信它將完全符合您的需求。, 適用於以下情況：, , 前端修改（無需修改主題文件）, 添加功能（無需修改functions.php）, ...。
Advance Custom HTML 》這是一款用來專業編寫 HTML 代碼的高級 HTML 編輯器，提供不同的樣式、縮排與更多功能。, Advance Custom HTML 是一款功能強大、彈性十足的區塊外掛，讓您可...。
Code Block Pro – Beautiful Syntax Highlighting 》展示你美麗的程式碼，不僅僅是顯示它！這個版塊外掛提供編輯程式碼塊的功能，直接運行你的程式碼，使用與受歡迎的 VS Code 編輯器相同的渲染引擎。此外掛提供...。
Code Syntax Block 》代碼語法區塊（Code Syntax Block）擴充了 WordPress 區塊編輯器，使用 Prism 語法高亮工具為核心代碼區塊添加了語法高亮支持。, Prism 語法高亮工具在前端執...。
Foxtool All-in-One: Contact chat button, Custom login, Media optimize images 》總結：Foxtool 是根據管理 WordPress 網站的真實需求而開發的產品。經過一段時間的發展，Foxtool 已成為網站管理員不可或缺的外掛程式。該外掛擁有許多值得注...。