整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。
花了一點時間研究了一下各家的編輯器，規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進，或者丟失顏色樣式。
所以，這就難了。先得找個支持代碼高亮的編輯器，仔細地選擇并復制代碼塊，復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。
因為瀏覽器操作系統剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。
先看軟件成品演示：
軟件用法：
1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉換的編程代碼。
3、點擊「復制高亮代碼塊」按鈕。
然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。
下面是這個軟件的 aardio 源代碼：
import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/
import web.view;
var wb = web.view(winform.webCtrl);
import win.clip.html;
wb.export({
onHighlight = function(html,background,foreground){
html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
+ html + `</code></pre>`;
html,count = string.replace(html,'\n',"<br>");
if(!count){
html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
}
var cb = win.clip.html();
cb.write(html);
winform.setTimeout(
function(){
winform.editCode.show(true);
winform.webCtrl.show(false);
winform.text = "HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板，可在網頁直接粘貼";
},1000);
};
setLanguages = function(langs){
winform.languages = langs;
}
})
winform.cmbLangs.onEditChange = function(){
var text = string.lower(winform.cmbLangs.text);
var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) );
winform.cmbLangs.autoComplete(items);
}
winform.cmbLangs.editBox.disableInputMethod();
import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer();
httpServer.run(web.prism,{
["/index.html"] = /*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
<script src="prism.js"></script>
<script>
function computedColorStyle(element, options = {}) {
Array.prototype.forEach.call(element.children,child => {
computedColorStyle(child, options);
});
const computedStyle = getComputedStyle(element);
element.style["color"] = computedStyle.getPropertyValue("color");
}
highlight = function(code,language){
var html = Prism.highlight(code, Prism.languages[language], language);
var codeEle = document.getElementById("code");
codeEle.innerHTML = html;
computedColorStyle(codeEle);
const computedStyle = getComputedStyle(codeEle);
onHighlight(codeEle.innerHTML
,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
,computedStyle.getPropertyValue("color"));
}
setLanguages( Object.keys(Prism.languages) );
</script>
</body>
</html>
*****/
});
wb.go( httpServer.getUrl("/index.html"));
winform.button.oncommand = function(id,event){
winform.text = "HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
winform.editCode.show(false);
winform.webCtrl.show(true);
wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}
winform.show();
win.loopMessage();打開 aardio 創建工程，然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：
這個軟件的原理：
1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js （ 支持生成獨立 EXE ），我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發獨立 EXE 程序
2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。
3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊，aardio 的任務是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板：
import win.clip.html;
var cb = win.clip.html();
cb.write(html); 然后只要愉快地粘貼代碼塊就可以。
如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『 復制全部到 HTML 代碼塊 』就可以了：
值工具與不透明度。
可以來看一下，比如在這里取了一個顏色，取了這樣的紫色，可以在這里去設計軟件里面把這個值復制過來，復制了之后在這里去寫一下，記得要加一個井號，16進制，這個顏色就會在這里展示出來了。
這個顏色其實可以用vscode自帶的調色板工具去切換顏色色值的模式，當點擊這里的時候能切換好幾種。當去調整透明度的時候會發現后面16進制的多了兩位，包括其他的顏色模式也會把它變成a的，加了透明度a字母的模式，RGBA。
這里可以看到這里還有個HWB，這個也是從來沒有用過，有興趣可以自己去研究一下。所以可以點擊這里去切換不同的顏色模式，下面的代碼的設定也會隨之的更改。
當去調整顏色的時候會發現調節的面板顏色就斷成了兩邊，左邊這里就是當前調整變成的顏色，右邊這里就是調整之前的顏色。如果調完半天之后發現效果不滿意，想回到原來那個，可以點擊一下就回去了。
有時候如果想用16進制的顏色的寫法，但是透明度又感覺不太好設置，其實可以先把它切換為RGBA模式。比如現在一開始這里是16進制的寫法，想讓它變成20%(不透明度)的顏色，先把鼠標放這里，讓顏色色板出現之后先把它轉成RGBA的模式，調透明度，調到比如20%的透明度，0.2，再切回去，再切回到這個模式。這個就不就是16進制的帶不透明度設置的寫法，一個顏色值了。
所以這些小技巧大家都可以去用一下。當然很多時候去給某個顏色設置不透明度相對來說會比較少用，比較常用的去設置不透明度其實很多時候是之前給大家介紹過的，給整個元素用opacity去設置一個不透明度。
比如把它設置到父元素上，不透明度跟顏色的不透明度是有非常大的區別的。不透明度(opacity)是整個元素的整體，包括它的子元素也會受影響的，會看到它整體，包括內部的子元素也好，它的整體變成了很不明顯的效果了。
但是顏色的設置只會影響到設置顏色的部分(或者方面)，比如設置不透明度，它只影響到了子元素的背景顏色的不透明度。比如字體，color是給文字設置顏色的，不透明度其實也可以設置，比如把字體的不透明度降到這么低，就會發現字體自己的顏色就會變得不透明度的狀態。
比如這里來個red，就明顯能感覺到它這些都是對應各自影響的部分去產生作用的。所以有時候如果希望背景顏色有一個不透明度，但是整體的元素不想讓它有任何的半透明的效果，就可以通過特定的背景顏色的顏色色值的不透明度的設置達到想要的效果，而不影響到整體的元素。
如果網頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網頁，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計算機是如何顯示顏色的？計算機根據色光三原色的原理通過各種算法來顯示顏色。
網頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅，綠，藍三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)對于16進制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍，每種顏色取值從00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍色*/對于rgb的表示法，由三個參數組成，分別是紅、綠、藍，每種顏色取值從0 到 255。
如下示例：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍色*/紅，綠，藍值從0到255的結合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。
但是現代大多數顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設置不能夠顯示的顏色，可以參考網頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍組成，還有亮度層級，如下圖：
rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設置更加漂亮的顏色。
通過background屬性可以設置元素的背景色、背景圖片，語法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一個聲明中設置所有的背景屬性，可以在這里設置如下屬性：
各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。
建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當然你也可以分開使用，比如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1、背景顏色 —— background-color
background-color 和之前講的的color 一樣，可以使用16進制、rgb、rgba等設置顏色。如下實例：
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>如下圖顯示：
注意：background-color: transparent; 指透明色，不顯示任何顏色。
2、背景圖片的使用——background-image
給html元素添加背景圖片，在早期網頁制作中被廣泛應用，如今已不建議大量使用。如下實例：
body {background-image:url(/static/bg.gif);}這里使用了一個125*125大小的圖片，如下：
但是你會發現，整個網頁鋪滿了圖片，上面的代碼默認會鋪滿整個頁面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設置。
背景圖片同時可以設置多個背景圖片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。
如下效果：
3、背景重復方式 —— background-repeat
它有如下幾個屬性：
repeat | 默認。背景圖像將在垂直方向和水平方向重復。 |
repeat-x | 背景圖像將在水平方向重復。 |
repeat-y | 背景圖像將在垂直方向重復。 |
no-repeat | 背景圖像不重復。 |
inherit | 從父元素繼承 background-repeat 屬性的設置。 |
實例如下：
4、背景圖的位置 —— background-position
背景圖片默認顯示在左上角，語法如下：
background-position: x y; // x 距離左邊距離，y距離頂部距離如果要改變它的位置，可以使用關鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分數值。
x 可以取值 百分比| 數值| left | center | right。
y 可以取值 百分比| 數值| top| center | bottom。
當只設置一個值的時候，另一個會缺省為 center。
使用關鍵字，將背景圖片水平居中，垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 等同于 center center，顯示效果和上圖一樣。
還可以使用具體數值，比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 顯示效果如下：
5、背景圖相對于容器的基準點 —— background-origin
就是設置背景圖片相對于html元素什么位置作為初始坐標點，語法：
background-origin: padding-box|border-box|content-box;幾種值得含義：
padding-box | 背景圖像相對填充框的位置 |
border-box | 背景圖像相對邊界框的位置 |
content-box | 背景圖像相對內容框的位置 |
如下實例：
6、背景圖片大小 —— background-size
默認會顯示背景圖原始尺寸，可以通過此屬性設置背景圖片在元素上的大小，語法：
background-size: width height;寬度和高度可以使用 數值、百分比%、cover 及 contain ;
數值：可以使用任何單位的數字，比如 px、em、cm等。如果設置一個值，第二個為"auto(自動)"。
百分比%：相對于其所在html原始寬度和高度，如果設置一個值，第二個為"auto(自動)"。
cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
如下示例：
7、背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment 屬性有以下幾個值：
scroll | 背景圖片隨頁面的其余部分滾動。這是默認 |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設置應該從父元素繼承 |
local | 背景圖片隨滾動元素滾動 |
如設置一個固定的背景圖片，不跟隨頁面滾動：
background-attachment:fixed;滾動滾動條，會發下背景圖片始終固定在屏幕那個位置。
8、背景繪制區域 —— background-clip
語法如下：
background-clip: border-box|padding-box|content-box;border-box | 默認值。背景繪制在邊框方框內（剪切成邊框方框）。 |
padding-box | 背景繪制在襯距方框內（剪切成襯距方框）。 |
content-box | 背景繪制在內容方框內（剪切成內容方框）。 |
這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進行混合，語法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值：
示例如下：
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試，看下有什么區別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習，每種屬性進行組合使用看看其效果。
一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補充。
上篇：前端入門——css鏈接樣式
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
