Without changing the settings, syntax highlighting is enabled by default:

<img src="/img/tutorial/extending-openapi/image02.png">

But you can disable it by setting `syntaxHighlight` to `False`:

{* ../../docs_src/configure_swagger_ui/tutorial001_py310.py hl[3] *}

...and then Swagger UI won't show the syntax highlighting anymore:

<img src="/img/tutorial/extending-openapi/image03.png">

## Change the Theme { #change-the-theme }

</div>

在浏览器中打开 [http://127.0.0.1:8000](http://127.0.0.1:8000)。

您将看到一个简单的页面，如下所示：

<img src="/img/tutorial/websockets/image01.png">

您可以在输入框中输入消息并发送：

<img src="/img/tutorial/websockets/image02.png">

您的 **FastAPI** 应用程序将通过 WebSockets 回复：

<img src="/img/tutorial/websockets/image03.png">

您可以发送（和接收）多条消息：

<img src="/img/tutorial/websockets/image04.png">

所有这些消息都将使用同一个 WebSocket 连接。

    <img src="https://coverage-badge.samuelcolvin.workers.dev/fastapi/fastapi.svg" alt="Coverage">
</a>
<a href="https://pypi.org/project/fastapi">
    <img src="https://img.shields.io/pypi/v/fastapi?color=%2334D058&label=pypi%20package" alt="Package version">
</a>
<a href="https://pypi.org/project/fastapi">

{% for sponsor in sponsors.gold -%}
<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
{% endfor %}
{% endif %}

{% if sponsors.silver %}

### Silver Sponsors

{% for sponsor in sponsors.silver -%}
<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
{% endfor %}
{% endif %}

例えば、Swagger UI のシンタックスハイライトを無効化できます。

設定を変更しなければ、シンタックスハイライトはデフォルトで有効です:

<img src="/img/tutorial/extending-openapi/image02.png">

しかし、`syntaxHighlight` を `False` に設定すると無効化できます:

{* ../../docs_src/configure_swagger_ui/tutorial001_py310.py hl[3] *}

...その場合、Swagger UI ではシンタックスハイライトが表示されなくなります:

<img src="/img/tutorial/extending-openapi/image03.png">

## テーマの変更 { #change-the-theme }

<div class="screenshot">
<img src="/img/tutorial/separate-openapi-schemas/image03.png">
</div>

### 文件中的輸入與輸出模型 { #model-for-input-and-output-in-docs }

如果你查看 OpenAPI 中所有可用的結構描述（JSON Schema），會看到有兩個：`Item-Input` 與 `Item-Output`。

對於 `Item-Input`，`description` 不是必填，沒有紅色星號。

但對於 `Item-Output`，`description` 是必填，有紅色星號。

<div class="screenshot">
<img src="/img/tutorial/separate-openapi-schemas/image04.png">
</div>

<div class="screenshot">
<img src="/img/tutorial/separate-openapi-schemas/image03.png">
</div>

### 文档中的输入/输出模型 { #model-for-input-and-output-in-docs }

如果你查看 OpenAPI 中可用的所有 Schema（JSON Schema），你会看到有两个，一个是 `Item-Input`，一个是 `Item-Output`。

对于 `Item-Input`，`description` **不是必填**，没有红色星号。

但对于 `Item-Output`，`description` 是**必填**，带有红色星号。

<div class="screenshot">
<img src="/img/tutorial/separate-openapi-schemas/image04.png">

## 禁用语法高亮 { #disable-syntax-highlighting }

比如，你可以禁用 Swagger UI 中的语法高亮。

当没有改变设置时，语法高亮默认启用：

<img src="/img/tutorial/extending-openapi/image02.png">

但是你可以通过设置 `syntaxHighlight` 为 `False` 来禁用 Swagger UI 中的语法高亮：

{* ../../docs_src/configure_swagger_ui/tutorial001_py310.py hl[3] *}

...在此之后，Swagger UI 将不会高亮代码:

<img src="/img/tutorial/extending-openapi/image03.png">

## 改变主题 { #change-the-theme }

   Skip image links, .no-link-icon, and .announce-link */
a[data-external-link]:not(:has(img)):not(.no-link-icon):not(.announce-link) {
  /* For right to left languages */
  direction: ltr;
  display: inline-block;
}

a[data-external-link]:not(:has(img)):not(.no-link-icon):not(.announce-link)::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;

これでクライアントコードを import して利用できます。例えば次のようになり、メソッドに対して補完が効きます:

<img src="/img/tutorial/generate-clients/image02.png">

送信するペイロードにも補完が適用されます:

<img src="/img/tutorial/generate-clients/image03.png">

/// tip | 豆知識

FastAPI アプリの `Item` モデルで定義した `name` と `price` に補完が効いている点に注目してください。

///

送信データに対するインラインエラーも表示されます:

<img src="/img/tutorial/generate-clients/image04.png">

レスポンスオブジェクトにも補完があります: