日喀則企業網站開發:網站代碼片段模塊突出顯示插件

2019.05.14 |
標簽

許多網站在他們的文章中顯示源代碼。顯示源代碼并不總是那么容易。大多數站點都使用需要標簽、短代碼、嵌入式鏈接或類似解決方案的插件。解決方案有時會感到笨拙,甚至會導致格式化問題。另一個選項是一個名為代碼片段模塊的Divi插件。

代碼段模塊是一個第三方插件,它將一個新模塊添加到DiviBuilder以顯示代碼。這與DiviBuilder代碼模塊不同。標準代碼模塊運行您放置在其中的代碼。代碼段模塊以語法高亮顯示代碼。代碼片段模塊與Divi、External和DiviBuilder插件一起工作。

日喀則企業網站開發

日喀則企業網站開發在這篇文章中,我們將看到模塊是如何工作的,它如何被設計成適合您的網站的設計。此插件突出顯示的代碼取自w3Schools.com,其目的只是演示代碼如何在代碼片段模塊中顯示。例如,圖片是在Unsplash.com上拍攝的。

安裝和設置

日喀則企業網站開發

上傳并激活插件。不需要帳戶信息。代碼段模塊將添加到DiviBuilder中。

模塊包括內容選項卡中的代碼框。“設計”選項卡有許多代碼樣式設置。設置包括語言(用于突出顯示)、樣式(配色方案)、顯示數字、自定義選項卡寬度和大量字體樣式。它還包括標準標題和邊框樣式。

默認情況下,它將嘗試自動檢測語言。如果它在自動檢測方面有問題,一些代碼可能無法正確格式化。如果發生這種情況,您可以手動選擇語言。我對自動檢測語言的格式設置沒有問題。

它有70多種款式。它們主要改變字體和背景的顏色。有些有背景圖案,但大多數是純色。字體與代碼類型匹配,因此變量將是一種顏色,語句將是另一種顏色,注釋使用不同的顏色,等等。

使用代碼段模塊

上面的圖像顯示了頂部的標準Divi代碼模塊和底部的代碼段模塊。這顯示了這兩個模塊與代碼的反應。兩個模塊中放置的HTML代碼相同。Divi代碼模塊運行代碼。代碼段模塊顯示代碼。

這是默認設置。讓我們看一看使用不同樣式的幾種語言。我已經包括了每一個的默認設置,以幫助您進行比較。

HTML

這是與前面示例中相同的代碼。它使用默認樣式,但我添加了行號,并將字體更改為喬治亞。我把字體大小增加到了18點。標簽是粗體。

下面是默認設置中的注釋。注釋是淺灰色的,因此它們看起來與標記不同。

這個使用了一種叫做Darkula的風格。標簽是橙色的。

CSS

CSS選擇器和屬性以粗體顯示。數值是紅色的。大括號和文本值使用默認代碼字體。這使用自動檢測和默認樣式。

這是阿蓋特風格。選擇器是橙色的,屬性是黃色的。大括號和文本值為默認白色字體,數字值為紅色。

CSS注釋在默認設置中為淺灰色。

此示例使用Codepen Embedded。

這個是暗夜河口。我包括了電話號碼。

這是河口燈。我也把這個號碼也包括進去了。

JavaScript

下面是使用默認設置的JavaScript片段。語句為綠色和灰色,而HTML元素和值為紅色。

這是使用稱為AndroidStudio的樣式的JavaScript。語句是灰藍色的,而HTML元素和值是綠色的。

下面是使用Arduino Light的相同片段。我在行中添加了一個藍色的背景,以使代碼片段模塊脫穎而出。語句使用紅色和灰色藍色,而HTML元素和值是綠色的。

這個包括評論。評論是多色的。

這是相同的代碼使用沙丘黑暗。

這里是沙丘之光。

這個用得很遠。我加了電話號碼。

SQL

SQL語句為粗體,而表使用默認字體。值是紅色的。

這使用了一種叫做“布朗紙”的風格。語句是藍色的,表是黑色的,值是紫色的。這是少數幾種在后臺使用模式的樣式之一。

下面是帶有注釋的默認設置。注釋比代碼的其余部分更輕。

看看基金會。我包括了電話號碼。

PHP

PHP語言標記是藍色的。關鍵字使用默認字體,函數為粗體,變量為紅色。

這個例子使用黑暗洞穴。PHP語言標記是紅色的。關鍵詞是灰色的,函數是紫色的,變量是藍色/綠色的。

這是洞穴之光。它有一個略帶紫色的背景和代碼的顏色是一個變化的洞穴黑暗。

這里有使用默認設置的注釋。

這種風格是吉頓。評論用斜體表示。

我是吉頓·吉斯特。

這是谷歌代碼。

這個是VisualStudio。這對VS用戶來說很熟悉。我增加了一個背景來幫助它脫穎而出。使用邊框是另一種選擇。

自舉

下面是一個使用默認樣式的引導示例。引導程序并不是一種語言(因為它是一個HTML、CSS和JavaScript框架),但我想說明它的格式是正確的。

我是波約克。

jQuery

下面介紹一下jQuery。

它使用XT 256。我給了它一條邊界來幫助它脫穎而出。

XML

下面是使用默認設置的XML示例。

我是贊本。我從下拉列表中選擇了XML,如您所見,前面的圖像中的自動檢測已經正確格式化了代碼。

這一本是教科書。我加了電話號碼。在此字體大小下,代碼與頁行并排。增大大小會使它們對齊方式不同。

作出調整

這是一個PHP片段。讓我們對設計進行一些手動更改。

我更改了代碼字體類型、大小、顏色和行高。我還增加了一個邊框。

制片寬度

在這個示例(它使用SulphurPoolLight)中,我在粘貼代碼之前添加了選項卡。幸運的是,您可以調整選項卡的寬度,以便代碼正確顯示。

我已經將選項卡寬度調整為1,這減少了標簽縮進的數量。這是硫磺池黑暗。

定制造型

代碼片段顯示區域甚至可以使用CSS樣式。這個文獻資料包括一些造型的例子。這是提供的例子之一。

布局實例

當然,該模塊的優點是它使用DiviBuilder并適合您的Divi布局。有足夠的風格,你可以把它與您的網站的設計輕松。這個用帕萊索光。它很符合我的樣頁的樣式。

這位是鐵道部的。我已經定制了標題字體樣式、大小和顏色,以匹配頁面的標題。

這個使用Divi 100的博客文章布局。代碼樣式是SolarizedLight。

它也很好用額外的。此示例使用高原黑暗。

許可證和文件

它有無限的安裝。它甚至有60天的退款保證。文檔提供在開發人員的網站。它包括說明和CSS樣式示例。

最后思想

代碼片段模塊是在Divi布局中顯示代碼的好方法。它很容易改變外觀和感覺,代碼是干凈的,可以復制粘貼。日喀則企業網站開發只展示了與之兼容的少數語言,并且在格式化方面沒有問題。所有的樣式都與所有的語言一起工作,它們可以使用CSS進行進一步的樣式設計。如果您為您的讀者提供代碼,Divi代碼段模塊可能是您需要的插件。


相關推薦

日喀則公司網站制作:測試您的電子郵件活動是否正常工作
 

日喀則公司網站制作:測試您的電子郵件活動是否正常工作

創建一個現代時尚的電子郵件活動比以往任何時候都更容易感謝無數的強大的營銷工具我們有指尖。然而,讓您的電子郵件正確顯示在每個客戶端仍然是棘手的。最好的解決方案是在發送給您的訂閱者之前對您的活動進行適當的...
2019.05.14
日喀則企業網站開發:網站代碼片段模塊突出顯示插件
 

日喀則企業網站開發:網站代碼片段模塊突出顯示插件

許多網站在他們的文章中顯示源代碼。顯示源代碼并不總是那么容易。大多數站點都使用需要標簽、短代碼、嵌入式鏈接或類似解決方案的插件。解決方案有時會感到笨拙,甚至會導致格式化問題。另一個選項是一個名為代碼片...
2019.05.14
日喀則做網站:9個最佳免費博客網站比較
 

日喀則做網站:9個最佳免費博客網站比較

創建博客聲響簡單-你只需要選擇一個話題并開始寫作。然而,它還有更多的東西。例如,您還需要選擇正確的平臺來支持這一切,做出決定并不容易。選擇合適的博客網站可以幫助你成功運行,讓你的新項目更容易解決。在這篇...
2019.05.14
日喀則網站設計制作:如何選擇正確的Bloom Opt-in設置
 

日喀則網站設計制作:如何選擇正確的Bloom Opt-in設置

在這篇文章中,我們將在你的網站上討論一些花式選擇設置的技巧和技巧。有不同的選擇設置,您可以分配到被選擇的表單;任何類型的選擇-進入形式,您可能正在使用。日喀則網站設計制作除了注意找到(和創建)一個匹配的布...
2019.05.14

最新文章

日喀則網站設計制作:如何選擇正確的Bloom Opt-in設置
 

日喀則網站設計制作:如何選擇正確的Bloom Opt-in設置

在這篇文章中,我們將在你的網站上討論一些花式選擇設置的技巧和技巧。有不同的選擇設置,您可以分配到被選擇的表單;任何類型的選擇-進入形式,您可能正在使用。日喀則網站設計制作除了注意找到(和創建)一個匹配的布...
2019.05.14
日喀則做網站:9個最佳免費博客網站比較
 

日喀則做網站:9個最佳免費博客網站比較

創建博客聲響簡單-你只需要選擇一個話題并開始寫作。然而,它還有更多的東西。例如,您還需要選擇正確的平臺來支持這一切,做出決定并不容易。選擇合適的博客網站可以幫助你成功運行,讓你的新項目更容易解決。在這篇...
2019.05.14
日喀則企業網站開發:網站代碼片段模塊突出顯示插件
 

日喀則企業網站開發:網站代碼片段模塊突出顯示插件

許多網站在他們的文章中顯示源代碼。顯示源代碼并不總是那么容易。大多數站點都使用需要標簽、短代碼、嵌入式鏈接或類似解決方案的插件。解決方案有時會感到笨拙,甚至會導致格式化問題。另一個選項是一個名為代碼片...
2019.05.14
日喀則公司網站制作:測試您的電子郵件活動是否正常工作
 

日喀則公司網站制作:測試您的電子郵件活動是否正常工作

創建一個現代時尚的電子郵件活動比以往任何時候都更容易感謝無數的強大的營銷工具我們有指尖。然而,讓您的電子郵件正確顯示在每個客戶端仍然是棘手的。最好的解決方案是在發送給您的訂閱者之前對您的活動進行適當的...
2019.05.14

熱門推薦

選擇您希望日喀則網站設計成品的風格偏好,讓我們通過精確的分析與篩選,為您推薦合適的版式布局,
為此,您可以節省最基本的溝通時間,
讓我們把有限的時間,充分的用在對行業的分析及您企業網站建設的自身分析上吧
聯系電話 400-6065-301

留言

(*^▽^*)MG舞线奖金赔率 真钱网络捕鱼达人游戏 微信网赚靠谱吗 江西多乐彩遗漏数据 广西快乐10分官方网站 im体育官im体育官网 网球比分直播吧 福彩3d预测 山东11选5走势图基本走势走势图 金博士期货分析软件 美女捕鱼下载安装 重庆麻将实战口诀 手机合法彩票网站 六合彩的挂牌资料 四川金7乐下载苹果 浙江11选5开奖结果公告 2021年期货投资分析通过率