如题，我想在我的网站里制作代码块。像是下面的：
HTML代码块
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text editor - Xcfo</title>
<!-- Text Editor ©yeyu 2021 -->
</head>
<body>
<img src="https://xcfo.github.io/assets/images/xchuang/web/soft/text/svg/docs.svg" class="docs" height="70px" alt="Document Image" title="Document image" onclick="get('changeImage').style.display = 'block'" id="docphoto">
<input type="text" name="doc" id="doc_name" oninput="doc = get('doc_name').value.replace(' ','-').replace('&','-').replace('%','-').replace('#','-'); get('doc_name').value = doc">
<img src="https://xcfo.github.io/assets/images/xchuang/web/soft/text/svg/user.svg" class="user" id="userphoto" >
<img class="user transparent" onclick="usermenu()">
<div class="w" id="usermenu">
<center>
<br>
<font size="9">X-Text</font>
<hr>
<a href="user.html">用户设定</a>
<br>
<a href="docs.html">文件管理</a>
<br>
<a href="index.html">主页</a>
<br><br>
<font size="9">Tools</font>
<hr>
<a href="https://web.dev">web.dev</a>
<br>
<a href="https://developer.mozilla.org/zh-CN/">moz://a</a>
<br>
<a href="https://www.w3schools.com/">W3Schools</a>
</center>
</div>
<div class="tool-bar">
<button class="btn" id="large-font" onclick="large()" title="放大文字">
<span class="material-icons-round">
zoom_in
</span>
</button>
<button class="btn" id="small-font" onclick="small()" title="缩小文字">
<span class="material-icons-round">
zoom_out
</span>
</button>
<button class="btn" id="left" onclick="left()" title="置左">
<span class="material-icons-round">
format_align_left
</span>
</button>
<button class="btn" id="center" onclick="center()" title="置中">
<span class="material-icons-round">
format_align_center
</span>
</button>
<button class="btn" id="right" onclick="right()" title="置右">
<span class="material-icons-round">
format_align_right
</span>
</button>
<button class="btn" id="clear" onclick="clearform()" title="清除格式！！！！">
<span class="material-icons-round">
format_clear
</span>
</button>
<button class="btn" id="edit" onclick="edit()" title="自定义CSS">
<span class="material-icons-round">
border_color
</span>
</button>
<button class="btn" id="upload" title="保存">
<span class="material-icons-round">
save
</span>
</button>
</div>
<div id="custom">
<e>text.style = </e><input type="text" name="css" id="css">
<button class="btn" type="submit" id="subcss" onclick="ccss()"><span class="material-icons-round">send</span></button>
</div>
<div class="text">
<textarea name="text" id="text" cols="30" rows="10" class="t" style="font-size: 16;" oninput="saved = false"></textarea>
</div>
<div id="changeImage">
<div class="d i" onclick="get('changeImage').style.display = 'none';"></div>
<div class="d nn">
<div class="docimg">
<span class="material-icons-round close">
close
</span>
<img id="docimag">
<t>输入图片网址</t>
<input type="url" name="docimgurl" id="docimgurl" placeholder="https://example.com" pattern="https://.*" size="30" required oninput="readURL(this)">
<button class="btn upload" title="上传至服务器" onclick="isHasImg()"><span class="material-icons-outlined">
dns
</span>
</button>
</div>
</div>
</div>
<div id="mc">
<m id="m"><span class="material-icons-round mm">
comment
</span>
<c id="c">Saved</c>
</m>
</div>
<noscript><j>你需要启用 JavaScript 来运行本程序，启动方法请前往：</j><a href="https://support.google.com/adsense/answer/12654?hl=zh-Hans">Google support.</a></noscript>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
// Script 已被我删除。
</script>
</body>
</html>
Python 代码块
import numpy as np
n, m = map(int, input().split())
a = np.array([input().split() for i in range(n)], dtype=int)
b = np.array([input().split() for i in range(n)], dtype=int)
print(a + b)
print(a - b)
print(a * b)
print(a // b)
print(a % b)
print(a ** b)
C++ 代码块
#include <iostream>
using namespace std;
int main()
{
char op;
float num1, num2;
cout << "输入运算符：+、-、*、/ : ";
cin >> op;
cout << "输入两个数: ";
cin >> num1 >> num2;
switch(op)
{
case '+':
cout << num1+num2;
break;
case '-':
cout << num1-num2;
break;
case '*':
cout << num1*num2;
break;
case '/':
if (num2 == 0)
{
cout << "error不能除以零";
break;
}
else
{
cout << num1 / num2;
break;
}
default:
// 如果运算符不是 +, -, * 或 /, 提示错误信息
cout << "Error! 请输入正确运算符。";
break;
}
return 0;
}
没错就是像是些这样的代码块，帮我找找资源或者告诉我写方法，谢。
