1. 冰沫记首页
  2. 网站教程
  3. 网站收录

免费提供一款公众号高亮代码编辑器

古哥 • • 网站收录
4.7
(3)

最近开始更新公众号，经常会添加一些代码，微信公众号自带的编辑器代码不太美观。于是，找GPT写了一款可以一键将高亮代码复制到微信公众号的前端源码。源码只包含Html、CSS、JS。已经用了有一段时间，今天发出来供大家使用。

为了展示高亮代码是什么东西，这里我把一部分代码发出来，看看高亮代码是什么效果。

Html代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="公众号,高亮代码,编辑器">
    <meta name="description" content="一键复制高亮代码到公众号编辑器中，支持几乎所有语言，提供多种样式">
    <link rel="shortcut icon" href="https://oss.iymark.com/2023/03/2023031716334863.png">
    <link rel="icon" href="https://oss.iymark.com/2023/03/2023031716334863.png" sizes="32x32" />
    <link rel="icon" href="https://oss.iymark.com/2023/03/2023031716334863.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="https://oss.iymark.com/2023/03/2023031716334863.png" />
    <link rel="stylesheet" id="prism-style" href="./style/prism-default.css" />
    <link rel="stylesheet" href="./style/style.css" />
    <title>代码高亮器</title>
</head>

<body>
    <header>
        <h1>代码高亮</h1>
        <p>一键复制高亮代码到公众号编辑器中，支持几乎所有语言，提供多种样式</p>
        <p>复制到公众号编辑器中，可以看到滚动条，但发布后手机端不会有电脑端那么夸张的滚动条</p>
    </header>
    <main>
        <div class="left-panel">
            <label for="languageSelector">选择语言：</label>
            <button onclick="shareCode()">分享</button>
            <div id="overlay" style="display: none;"></div>
            <div id="qrcode-container" style="display: none;">
                <button id="close" onclick="closeQRCode()">关闭</button>
                <div id="qrcode"></div>
                <p>二维码只包含语言、样式、部分代码</p>
                <p>标签链接处为语言、样式、全部代码</p>
            </div>
            <select id="languageSelector"></select>
            <!-- 添加一个样式选择器 -->
            <label for="styleSelector">选择样式：</label>
            <select id="styleSelector" onchange="changeStyle()">
                <option value="default">default</option>
                <option value="dark">dark</option>
                <option value="funky">funky</option>
                <option value="okaidia">okaidia</option>
                <option value="twilight">twilight</option>
                <option value="monokai">monokai</option>
                <option value="github">github</option>
                <option value="light">light</option>
                <option value="night">night</option>
                <!-- 根据需要添加其他样式选项 -->
            </select>
            <!-- 添加一个输入框用于自定义高度 -->
            <label for="customHeight">代码高度：</label>
            <input type="number" id="customHeight" placeholder="输入高度（0为不设置），默认高度为500" oninput="applyCustomHeight()">
            <label for="codeInput">输入代码：</label>
            <textarea id="codeInput" rows="5"></textarea>
        </div>

        <div class="right-panel">
            <label>输出结果：</label>
            <button id="copy" onclick="copyCode()">复制</button>
            <div id="output"></div>
        </div>
    </main>
    <script src="./script/lang.js"></script>
    <script src="./script/script.js"></script>
    <script src="./script/prism.js"></script>
    <script src="./script/qrcode.js"></script>
    <script src="./script/jquery.js"></script>
    <script src="./script/content.js"></script>
    <div id="menus">
        <div data-id="copy">复制（Ctrl + C）</div>
        <div data-id="paste">粘贴（Ctrl + V）</div>
    </div>
</body>

</html>
免费提供一款公众号高亮代码编辑器

CSS代码

body {
	background: #512222;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTUuMyA5NS4zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDk1LjMgOTUuMyAwSDB6IiBmaWxsPSIjMmYzMTMwIi8+PC9zdmc+);
	background-size: 85vw,1200px,cover;
	background-repeat: no-repeat;
	background-position: 0 0;
	color: #fff;
}

header {
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

main {
	font-family: 'Arial', sans-serif;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 1500px;
	width: 100%;
}

.left-panel {
	width: 30%;
	box-sizing: border-box;
	font-size: 16px;
	margin-right: 10px;
}

button {
	background-color: darkred;
	border: 1px solid transparent;
	color: #fff;
	font-weight: 700;
	padding: 0.5rem 1rem;
	cursor: pointer;
}

#languageSelector, #codeInput, #styleSelector {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 15px 0;
	background: #3b3e3d;
	color: #fff;
	border: none;
}

#codeInput {
	min-height: 257px;
}

.right-panel {
	width: 70%;
	box-sizing: border-box;
	font-size: 16px;
	margin-left: 10px;
}

#output {
	margin: 15px 0;
}

label {
	font-size: 18px;
	font-weight: bold;
}

select {
	padding: 8px;
}

code[class*="language-"], pre[class*="language-"] {
	font-size: 14px;
	max-height: 500px;
	border: none;
	box-shadow: none;
}

code[class*="language-"] {
	background: none;
}

pre[class*="language-"]:before, pre[class*="language-"]:after {
	box-shadow: none;
}

@media (max-width:991px) {
	.left-panel, .right-panel {
		width: 100%;
	}

	main {
		display: block;
	}

	.left-panel {
		margin-bottom: 20px;
		margin-right: 0;
	}

	.right-panel {
		margin-top: 20px;
		margin-left: 0;
	}
}

#customHeight {
	box-sizing: border-box;
	padding: 10px;
	margin: 15px 0;
	background: #3b3e3d;
	color: #fff;
	border: none;
	width: 100%;
}

#menus {
	width: 140px;
	padding: 3px 5px;
	background-color: #ffffff;
	color: #000;
	display: none;
        /* display: flex; */
	flex-wrap: wrap;
	border: 1px solid #dadce0;
	border-radius: 2px;
	box-shadow: 1px 1px 2px #878787;
	position: fixed;
	user-select: none;
}

#menus div {
	display: flex;
	align-items: center;
	margin: 2px 0px;
	cursor: pointer;
	width: 100%;
	min-height: 26px;
	padding: 0px 8px;
	font-size: 14px;
}

#menus div:hover {
	background-color: #e8e8e9;
}

#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	transition: background 0.3s ease;
 /* 添加过渡效果 */;
}

#qrcode-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	z-index: 10000;
	padding: 50px 50px 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	text-align: center;
}

#qrcode-container p {
	color: #000;
}

button#close {
	right: 0;
	position: absolute;
	top: 0;
}
免费提供一款公众号高亮代码编辑器

JS代码

// 添加一个改变 Prism 样式的函数
function changeStyle() {
    var styleSelector = document.getElementById('styleSelector');
    var selectedStyle = styleSelector.value;
    // 获取现有的链接元素
    var linkElement = document.getElementById('prism-style');
    // 更改 href 属性以加载选定的样式
    linkElement.href = `./style/prism-${selectedStyle}.css`;
    // 使用新样式重新进行代码高亮
    highlightCode();
}

function highlightCode() {
    var languageSelector = document.getElementById('languageSelector');
    var codeInput = document.getElementById('codeInput');
    var output = document.getElementById('output');
    var selectedLanguage = languageSelector.value;
    var code = codeInput.value;
    // 清空输出框
    output.innerHTML = '';
    // 创建新的<pre><code>元素
    var codeElement = document.createElement('pre');
    var codeBlock = document.createElement('code');
    codeBlock.classList.add('language-' + selectedLanguage);
    codeBlock.textContent = code;
    codeElement.appendChild(codeBlock);
    // 将新创建的元素添加到输出框
    output.appendChild(codeElement);
    // 使用 Prism 进行代码高亮
    Prism.highlightElement(codeBlock);
}
免费提供一款公众号高亮代码编辑器

使用方法

关注公众号：《冰沫记》，后台回复：高亮代码，即可免费获取这款线上工具

将代码粘贴到代码输入区，设置好代码对应的语言，选择一个你喜欢的样式，右侧代码输出区就会自动将代码高亮。然后点击页面上的复制，再打开微信公众号编辑器，粘贴，即可一键粘贴到微信公众号。

指的注意的是，我提供了大约200多种市面上常见的语言，提供了九种高亮代码样式，可以说相当完美，欢迎各位体验。

此外，分享按钮，可以将你喜欢的样式分享用二维码分享给他人。由于代码过长，二维码容易无法扫码，所以自动剪切部分代码，以及你选择的语言、样式，别人扫码直接就可以看到。

免费提供一款公众号高亮代码编辑器

当然，分享后，链接处会自动变成你选择的语言样式及全部代码，下次直接访问就可以看到上次输入的代码及语言样式，相当方便。最后，一张大图送给大家，列举一些样式。

免费提供一款公众号高亮代码编辑器

共计3人评分，平均4.7分

到目前为止还没有投票~

很抱歉，这篇文章对您没有用！

让我们改善这篇文章！

告诉我们我们如何改善这篇文章？

文章目录

原创文章，作者：古哥，转载需经过作者授权同意，并附上原文链接：https://iymark.com/articles/16584.html

赞 (0)
微信公众号
古哥的头像古哥管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年11月16日 19:52
下一篇 2023年11月17日 17:40
高防SCDN安全加速 免备案U盘个性化图标 Diy教程防火墙日志清理 自动化Wordpress优化思路 免费查阅不懂就尽情提问 有问必答WP OpenAI插件 自动创作热点软文推广 详情查看WordPress优化服务 付费咨询

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号
关于本站
打赏赞助
隐私条款
网站优化
加入我们