Atom官方下載創(chuàng)建主題圖文教學(xué)

Atom是一款專(zhuān)業(yè)的代碼文本編輯工具，是對(duì) GitHub 通過(guò)合作構(gòu)建更好軟件的主要使命的完美補(bǔ)充，本軟件一直在進(jìn)行持續(xù)的更新，想圍繞文本編輯器建立一個(gè)繁榮、持久的社區(qū)，它必須是開(kāi)源的，是免費(fèi)的，添加應(yīng)用程序和上下文菜單項(xiàng)，操縱窗口尺寸等，需要的朋友趕緊下載體驗(yàn)吧！

Atom 的界面使用 HTML 呈現(xiàn)，并通過(guò)CSS 的超集Less進(jìn)行樣式設(shè)置。如果您以前沒(méi)有聽(tīng)說(shuō)過(guò) Less，請(qǐng)不要擔(dān)心；它就像 CSS，但有一些方便的擴(kuò)展。

Atom 支持兩種類(lèi)型的主題：UI和Syntax。UI 主題樣式元素，例如樹(shù)視圖、選項(xiàng)卡、下拉列表和狀態(tài)欄。語(yǔ)法主題為編輯器視圖中的代碼、裝訂線和其他元素設(shè)置樣式。

Atom官方下載創(chuàng)建主題圖文教學(xué)圖1

可以從設(shè)置視圖安裝和更改主題，您可以通過(guò)選擇文件 > 首選項(xiàng)菜單打開(kāi)該視圖，然后單擊左側(cè)導(dǎo)航中的“安裝”或“主題”選項(xiàng)卡。

主題非常簡(jiǎn)單，但在開(kāi)始之前熟悉一些事情仍然很有幫助：

Less 是 CSS 的超集，但它有一些非常方便的特性，比如變量。如果您不熟悉其語(yǔ)法，請(qǐng)花幾分鐘時(shí)間熟悉一下。

您可能還想查看 a 的概念package.json（如Atom 中所述package.json）。此文件用于幫助將您的主題分發(fā)給 Atom 用戶。

您的主題package.json必須包含一個(gè)theme值為ui或的鍵，syntax以便 Atom 識(shí)別并將其作為主題加載。

您可以在atom.io 主題注冊(cè)表中找到要安裝或分叉的現(xiàn)有主題。

Atom官方下載創(chuàng)建主題圖文教學(xué)圖2

讓我們創(chuàng)建您的第一個(gè)主題。

首先，按下Ctrl+Shift+P并開(kāi)始輸入“生成語(yǔ)法主題”以生成新的主題包。選擇“生成語(yǔ)法主題”，系統(tǒng)會(huì)詢問(wèn)您創(chuàng)建主題的路徑。讓我們打電話給我們的motif-syntax。

Atom官方下載創(chuàng)建主題圖文教學(xué)圖3

Atom 將顯示一個(gè)新窗口，顯示motif-syntax 主題，并為我們創(chuàng)建了一組默認(rèn)的文件夾和文件。如果您打開(kāi)設(shè)置視圖Ctrl+，并單擊左側(cè)的“主題”選項(xiàng)卡，您將看到“語(yǔ)法主題”下拉列表中列出的“主題”主題。從菜單中選擇它以激活它，現(xiàn)在當(dāng)您打開(kāi)編輯器時(shí)，您應(yīng)該會(huì)看到新的motif-syntax 主題正在運(yùn)行。

Atom官方下載創(chuàng)建主題圖文教學(xué)圖4

打開(kāi)styles/colors.less以更改已定義的各種顏色變量。例如，@red變成#f4c2c1.

然后打開(kāi)styles/base.less并修改已經(jīng)定義的各種選擇器。這些選擇器為編輯器中不同部分的代碼設(shè)置樣式，例如注釋、字符串和裝訂線中的行號(hào)。

舉個(gè)例子，讓我們把.gutter background-colorinto @red。

按 重新加載 AtomAlt+Ctrl+R以查看您所做的更改反映在您的 Atom 窗口中。挺整潔的！