Realize the things you haven't realized

 

Utaha

詩羽是一個 JavaScript 小型套件，通常用在 CSS UI 說明文件上，可以將某個指定容器

轉換成 HTML 原始碼，並且標記其 CSS 樣式重點，輸出到另一個容器，類似「預覽」和「原始碼」的功能。

請注意的是：詩羽目前僅支援標記 CSS 類別名稱。

 

索引

1. 範例

2. 需求

3. 架構

4. 開始

• 設置功能

5. 標記重點

• 自訂樣式

• CSS 樣式重點

 

範例

假設你今天可能正在製作一個 CSS 的教學網站，

下面就是採用詩羽的範例，會自動產生一個 HTML 原始碼，並自動畫上重點供大家檢閱。

 

需求

1. jQuery 是不必要的

2. Highlight.JS 是必要的

 

架構

首先，一個「示範群組 .example 」是必要的，其中必須包含「預覽 .preview 」和一個「原始碼輸出區 .code 」

整體來說，像這樣：

<!-- 示範群組 -->
<div class="example">

  <!-- 預覽 -->
  <div class="preview"></div>
  <!-- / 預覽 -->
    
  <!-- 原始碼輸出區 -->
  <pre class="code"></pre>
  <!--/  原始碼輸出區 -->

</div>
<!-- / 示範群組 -->

 

開始

詩羽是一個函式，你需要透過 utaha() 來呼叫她，我們的建議是在網頁讀取完後才呼叫，

基本上是這樣子：

document.addEventListener('DOMContentLoaded', function()
{ 
    utaha();
});

 

設置功能

詩羽有幾個可自訂的功能。

var options = 
{
    'exampleContainer' : '.example',  // 示範容器的類別名稱 
    'previewContainer' : '.preview',  // 預覽容器的類別名稱
    'codeConrainer'    : '.code',     // 原始碼容器的類別名稱
    'insertBeforeCode' : '',          // 欲在原始碼之前插入的文字
    'insertAfterCode'  : '',          // 欲在原始碼之後插入的文字
}

 

接下來要套用的時候，在呼叫詩羽的時候傳入這個設置就可以了：

utaha(options);

/** 或者 */
utaha({'insertAfterCode': '上述都是原始碼喔喔喔喔喔！'})

 

標記重點

你可以透過我們提供的 data-important-* 功能，來特別標記輸出原始碼的某些片段。

 

自訂樣式

被標記的 CSS 樣式重點會套用 .hljs-important-class 樣式，您可以透過自訂 CSS 處理重點外觀。

 

CSS 樣式重點

如果你有需要標記的 CSS 樣式，那就在原始碼輸出區新增一個 data-important-class 。

<!-- 原始碼輸出區 -->
<pre class="code" data-important-class="button"></pre>
<!--/  原始碼輸出區 -->

 

當然，你也可以透過 , 來一次標記多個類別：

<!-- 原始碼輸出區 -->
<pre class="code" data-important-class="button, ts, menu, btn"></pre>
<!--/  原始碼輸出區 -->