h5高亮代码块 可缩放

在HTML5中，高亮代码块并实现可缩放功能，通常需要结合HTML、CSS和JavaScript来完成。以下是实现该功能的一种基本方法：

1. 使用`<pre>`和`<code>`标签来定义代码块。`<pre>`标签用于格式化文本，`<code>`标签用于定义代码部分，这样可以保持代码的格式和结构。

<pre><code>var x = 10;
var y = 20;
var z = x + y;
console.log(z);
</code></pre>

2. 为了实现高亮，可以引入一个代码高亮库，如 Prism.js。首先需要将库文件引入到项目中，然后在`<code>`标签中添加一个类名，比如`language-javascript`，用于指定代码语言。

<link rel="stylesheet" href="path/to/prism.css"/>
<script src="path/to/prism.js"></script>

<pre><code class="language-javascript">var x = 10;
var y = 20;
var z = x + y;
console.log(z);
</code></pre>

3. 实现可缩放的功能，可以使用CSS的`transform`属性，通过调整`scale`函数的参数来控制缩放级别。同时，需要JavaScript来动态调整缩放级别和添加控制按钮。

.scale-container {
  overflow: hidden;
  width: 100%;
}

.scale-container pre {
  transform-origin: left top;
  transition: transform 0.5s;
}

.scale-container.scale pre {
  transform: scale(0.8); /* 缩小20% */
}

// 假设有一个按钮用于切换缩放状态
document.querySelector('.zoom-toggle').addEventListener('click', function() {
  document.querySelector('.scale-container').classList.toggle('scale');
});

<div class="scale-container">
  <pre><code class="language-javascript">var x = 10;
  var y = 20;
  var z = x + y;
  console.log(z);
  </code></pre>
</div>
<button class="zoom-toggle">缩放代码块</button>

上述代码实现了一个基础的可缩放高亮代码块，你可以根据自己的需求进行样式和功能上的调整。