Kod Özellikleri

Code Highlight

HTML/XML, JSON, C#, Bash, YAML ve SQL kodlarını okunabilir sözdizimi renkleriyle göstermek için kullanılır. script.code-block etiketi gösterilecek kodun parçası değildir; yalnızca sayfa kaynağında dili tanımlayan ve içeriği highlighter'a taşıyan kapsayıcıdır.

HTML'de kullanım

<script class="code-block language-json" type="text/plain">
{"ExpenseVoucherTypeCode":"SATIS","ProfileId":"GIDERPUSULASI","Lines":[{"Name":"Hizmet","Amount":1200}]}
</script>

Okuyucunun gördüğü JSON

Diğer dil örneği

public async Task SendAsync(int orderId)
{
    await emailService.SendAsync(orderId);
}

İçerik kuralı: Handbook ve guide sayfalarında okuyucuya yalnızca gerçek JSON, XML veya kaynak kod gösterilir. script.code-block kapsayıcısı yalnızca Template feature kullanımını açıklayan teknik örneklerde görünür.

Copy Code

copy-code feature'ı mevcut pre > code bloklarına otomatik kopyalama butonu ekler. Bu sayfadaki tüm kod bloklarının sağ üstünde Copy Code butonu vardır.

<script src="features/code-highlight/code-highlight.js"></script>
<script src="features/copy-code/copy-code.js"></script>

Code Tabs

Farklı provider, istemci veya yaklaşım örneklerini aynı alanda göstermek için kullanılır. Yerel sekmeler yalnızca kendi panelini; global seçim ise aynı group değerindeki tüm panelleri değiştirir.

Yerel sekmeler

Yalnızca kendi panelini değiştiren basit kullanım için data-code-tabs, data-code-tab ve data-code-panel yeterlidir.

curl https://api.example.com/items

await client.GetAsync("/items");

<link rel="stylesheet" href="features/code-tabs/code-tabs.css">
<script src="features/code-tabs/code-tabs.js"></script>

<div class="code-tabs" data-code-tabs data-code-tabs-default="rest">
  <div class="code-tabs-list" data-code-tabs-list>
    <button class="code-tab" type="button" data-code-tab data-code-option="rest">REST API</button>
    <button class="code-tab" type="button" data-code-tab data-code-option="dotnet">.NET Client</button>
  </div>
  <div class="code-tab-panel" data-code-panel data-code-option="rest">...</div>
  <div class="code-tab-panel" data-code-panel data-code-option="dotnet">...</div>
</div>

Bölüm içi global seçim

Aynı sayfada birden fazla panel aynı tercihle değişecekse, global kontrol ve paneller aynı group değerini kullanır.

curl https://api.example.com/items

await client.GetAsync("/items");

<link rel="stylesheet" href="features/code-tabs/code-tabs.css">
<script src="features/code-tabs/code-tabs.js"></script>

<div class="code-tabs-global" data-code-tabs-global="client">
  <div class="code-tabs-global-copy">
    <span class="code-tabs-global-label">Kod örneği tercihi</span>
    <span class="code-tabs-global-description">Bu gruptaki örnekleri birlikte değiştirir.</span>
  </div>
  <div class="code-tabs-global-options" role="group" aria-label="Kod örneği tercihi">
    <button type="button" data-code-option="rest">REST API</button>
    <button type="button" data-code-option="dotnet">.NET Client</button>
  </div>
</div>

<div class="code-tabs" data-code-tabs data-code-tabs-group="client" data-code-tabs-default="rest">
  <div class="code-tabs-list" data-code-tabs-list>
    <button class="code-tab" type="button" data-code-tab data-code-option="rest">REST API</button>
    <button class="code-tab" type="button" data-code-tab data-code-option="dotnet">.NET Client</button>
  </div>
  <div class="code-tab-panel" data-code-panel data-code-option="rest">...</div>
  <div class="code-tab-panel" data-code-panel data-code-option="dotnet">...</div>
</div>

Header global seçim

Sayfa boyunca görünür kalması gereken tercihlerde aynı global kontrol header içinde kompakt varyantla gösterilebilir.

<link rel="stylesheet" href="features/code-tabs/code-tabs.css">
<script src="features/code-tabs/code-tabs.js"></script>

<header class="docs-topbar">
  <div class="docs-topbar-inner">
    <a class="docs-brand" href="index.html">Document Template</a>
    <div class="docs-top-actions">
      <div class="code-tabs-global code-tabs-global-header" data-code-tabs-global="client" aria-label="Kod örneği tercihi">
        <div class="code-tabs-global-options" role="group" aria-label="Kod örneği tercihi">
          <button type="button" data-code-option="rest">REST</button>
          <button type="button" data-code-option="dotnet">.NET</button>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="code-tabs-global" data-code-tabs-global="client">
  <button type="button" data-code-option="rest">REST API</button>
  <button type="button" data-code-option="dotnet">.NET Client</button>
</div>

<div class="code-tabs" data-code-tabs data-code-tabs-group="client" data-code-tabs-default="rest">
  <div class="code-tabs-list" data-code-tabs-list>
    <button class="code-tab" type="button" data-code-tab data-code-option="rest">REST API</button>
    <button class="code-tab" type="button" data-code-tab data-code-option="dotnet">.NET Client</button>
  </div>
  <div class="code-tab-panel" data-code-panel data-code-option="rest">...</div>
  <div class="code-tab-panel" data-code-panel data-code-option="dotnet">...</div>
</div>

Copy Table

copy-table feature'ı key/value satırlarında değeri tek tıkla kopyalanabilir hale getirir. Tek başına kullanılabilir; code-tabs panelinin içine yerleştirildiğinde yerel ve global seçimlerle birlikte çalışır.

Bağımsız tablo

<link rel="stylesheet" href="features/copy-table/copy-table.css">
<script src="features/copy-table/copy-table.js"></script>

<div class="copy-table" data-copy-table>
  <table>
    <tbody>
      <tr>
        <td class="copy-table-key"><code>Service.Endpoint</code></td>
        <td data-copy-value="https://api.example.local/v1">https://api.example.local/v1</td>
      </tr>
    </tbody>
  </table>
</div>

Global seçimle kullanım

<link rel="stylesheet" href="features/code-tabs/code-tabs.css">
<link rel="stylesheet" href="features/copy-table/copy-table.css">
<script src="features/code-tabs/code-tabs.js"></script>
<script src="features/copy-table/copy-table.js"></script>

<div class="code-tabs-global" data-code-tabs-global="environment">
  <button type="button" data-code-option="local">Lokal</button>
  <button type="button" data-code-option="dev">Dev</button>
</div>

<div class="code-tabs" data-code-tabs data-code-tabs-group="environment" data-code-tabs-default="local">
  <div class="code-tabs-list" data-code-tabs-list>
    <button class="code-tab" type="button" data-code-tab data-code-option="local">Lokal</button>
    <button class="code-tab" type="button" data-code-tab data-code-option="dev">Dev</button>
  </div>
  <div class="code-tab-panel" data-code-panel data-code-option="local">
    <div class="copy-table" data-copy-table>
      <table>
        <tbody>
          <tr><td class="copy-table-key"><code>App.BaseUrl</code></td><td data-copy-value>https://localhost:7043</td></tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="code-tab-panel" data-code-panel data-code-option="dev">
    <div class="copy-table" data-copy-table>
      <table>
        <tbody>
          <tr><td class="copy-table-key"><code>App.BaseUrl</code></td><td data-copy-value>https://dev.example.com</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>