实现HTML展示类似ghub的功能可以通过以下步骤：1 使用HTML的pre标签来展示代码可以在pre标签里放置code标签使得代码能够被高亮显示。2 添加CSS样式使pre标签里的代码能够像在Github上一样被高亮显示。3 添加复制按钮可以使用JavaScript来实现复制功能当用户点击复制按钮时将代码复制到剪切板中。4 将复制按钮放置在代码框右上角可以使用CSS样式来实现。以下是一个示例代码

可以通过以下步骤来实现：

1. 在JavaScript代码中获取代码块的行数，可以使用以下代码：

const codeBlock = document.querySelector('pre code');
const lines = codeBlock.innerHTML.split('\n').length;

2. 计算代码块的高度，每行的高度为代码块的font-size加上行高，最后加上一个像素的边框和padding。

const height = (lines + 1) * 20 + 2 + 16;

3. 将代码块的高度设置为计算出来的高度。

const preBlock = document.querySelector('pre');
preBlock.style.height = `${height}px`;

完整的JavaScript代码如下：

const codeBlock = document.querySelector('pre code');
const lines = codeBlock.innerHTML.split('\n').length;
const height = (lines + 1) * 20 + 2 + 16;
const preBlock = document.querySelector('pre');
preBlock.style.height = `${height}px`;

这样就可以根据脚本的行数，动态调整代码展示框的高度了