Code Preview

The reusable code component used throughout StylesDoc.

Author a code_block object in data, map it through Header/Body/Footer, and the renderer handles escaping, labels, language tags, copy affordance, spacing, and syntax token styling.

Component · code_block

Author code as data, not page HTML

Put the source code in a code_block object. The renderer owns the markup so every docs page gets the same terminal-style shell.

code_block data json
{
  "code_block": {
    "label": "Databoard mapping",
    "language": "json",
    "code": "{\n  \"data_mapping\": { ... }\n}"
  }
}
Data contract

HTML example

Use this for template examples, component markup, and H/B/F output examples.

service_3_modern output html
<section class="stylesdoc-band">
  <header class="stylesdoc-section-header">
    <h2>One structure</h2>
  </header>
  <div class="data-container">
    <article class="data-sub-container">...</article>
  </div>
</section>
HTML

Databoard JSON

Use this for menu sources, section topo, API payloads, patch_delta, and mapping examples.

section mapping json
{
  "data_mapping": {
    "api_data": [
      ["api_data"],
      ["databoard", "menu", "stylesdoc_component_code"]
    ]
  }
}
JSON

Controller code

Use this for generated HMVC examples, custom PHP snippets, and deployment-time normalization.

controller.php php
$rows = $orders-&gt;find(['status' =&gt; 'paid'])-&gt;toArray();
$api_data['body'][]['datatable'] = array_map(function ($row) {
    return [
        'customer' =&gt; $row['customer_name'],
        'total' =&gt; $row['total'],
        'status' =&gt; $row['status']
    ];
}, $rows);
PHP

CLI commands

Use this for deploy, smoke tests, API examples, and local build commands.

deploy.sh bash
curl -s -X POST http://localhost/api/v1/databoards/$BOARD_ID/deploy \
  -H "X-Antsand-API-Key: $ANTSAND_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'
Bash

Sass/CSS examples

Use this for Sass v2 component contracts, board Sass overrides, and utility examples.

_component.scss scss
.stylesdoc-code-contract-card {
  background: #ffffff;
  border: 1px solid #e5eaf1;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
CSS

Optional syntax coloring

When a docs page needs exact highlighting, pass pre-tokenized spans. The renderer preserves trusted token markup.

syntax tokens html
<span class="syn-tag">&lt;section</span> <span class="syn-attr">class</span>=<span class="syn-str">"stylesdoc-band"</span><span class="syn-tag">&gt;</span>
  <span class="syn-tag">&lt;h2&gt;</span>One structure<span class="syn-tag">&lt;/h2&gt;</span>
<span class="syn-tag">&lt;/section&gt;</span>
Syntax tokens

Use code_block anywhere in H/B/F

The same object works inside body items or footer. This is why the table, form, API, Databoard, and quick-start pages can all show code consistently.

H/B/F placement json
{
  "header": {"h2": "Example"},
  "data": [
    {"h3": "Step", "p": "Explain it", "code_block": {"language": "bash", "code": "make test"}}
  ],
  "footer": {
    "code_block": {"language": "json", "code": "{\"status\":\"ok\"}"}
  }
}
Where to use

One code panel. Many languages.

Use code_preview.variants[] when the same idea needs examples in multiple languages.

The data controls the examples, Sass v2 controls the visual system, and the renderer handles tab switching, active-panel copy, and syntax coloring.

Enhancement · variants[]
Reliable workflow example
from datetime import timedelta

@workflow.defn
class ReliablePublish:
    @workflow.run
    async def run(self, post_id: str) -&gt; str:
        draft = await workflow.execute_activity(
            fetch_draft,
            post_id,
            schedule_to_close_timeout=timedelta(seconds=20),
        )
        await workflow.execute_activity(verify_seo, draft)
        return await workflow.execute_activity(publish_post, draft)

Enable language tabs from data

Use one code_preview object with a variants array. Each variant maps to one tab and one syntax-highlighted code panel.

Data contract
multi-language-code-preview.json json
{
  "body": [
    {
      "code_preview": {
        "label": "Reliable workflow example",
        "theme": "multi_code",
        "copy": true,
        "variants": [
          {
            "label": "PYTHON",
            "language": "python",
            "code": "def run():\n    return publish()"
          },
          {
            "label": "GO",
            "language": "go",
            "code": "func Run() string {\n    return Publish()\n}"
          },
          {
            "label": "PHP",
            "language": "php",
            "code": "$result = publish($draft);"
          }
        ]
      }
    }
  ]
}