# 代码块

纯样式组件：不需要 JS，写好标记即可。展示代码：zh-code 用在 <pre> 上（等宽字体，过宽时横向滚动），zh-code-inline 用在行内的 <code> 上。不含语法高亮。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<p>调用 <code class="zh-code-inline">ZhaoUI.message('已保存')</code> 显示提示。</p>
<pre class="zh-code"><code>ZhaoUI.message('已保存');
ZhaoUI.dialog({ title: '确认' });</code></pre>
```

## 样式类

`zh-code`、`zh-code-inline`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-code` | <pre>（class） | 里面放 <code> | 代码块，带底色和边框，长行横向滚动 |
| `zh-code-inline` | <code>（class） |  | 行内代码 |

## 无障碍

- 代码块可横向滚动，因此可被键盘聚焦时请加 tabindex="0"，方便键盘用户滚动查看

## 常见问题

### 代码块是什么？

展示代码：zh-code 用在 <pre> 上（等宽字体，过宽时横向滚动），zh-code-inline 用在行内的 <code> 上。不含语法高亮。

### 怎么使用代码块？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 代码块支持键盘和读屏吗？

代码块可横向滚动，因此可被键盘聚焦时请加 tabindex="0"，方便键盘用户滚动查看。

### 代码块需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。