跳到正文

代码块

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

纯样式 核心包

示例

调用 ZhaoUI.message('已保存') 显示提示。

ZhaoUI.message('已保存');
ZhaoUI.dialog({ title: '确认' });

在线试用 Markdown 版

代码

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

属性

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

样式类

zh-code　zh-code-inline

无障碍

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

常见问题

代码块是什么？

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

怎么使用代码块？

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

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

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

代码块需要依赖框架吗？

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