论坛 › 马黑黑教程专版 › 帖子代码在线着色（测试版）

马黑黑 发表于 2024-2-25 11:48

帖子代码在线着色（测试版）

<style>
        #ma { margin: 20px auto; }
        #ma button { margin: 10px; }
        #ma textarea { padding: 8px; tab-size: 4; resize: none; }
        #scode { width: 100%; height: 360px; }
        #mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; display: none; }
        #msgBox { color: red; }
        .scode { margin: auto; width: 98%; text-align: center; }
</style>

<div id="ma">
        <p>【说明】原始代码无需转义。着色后点击复制着色源码按钮，得到的代码可直接发布到论坛。祝愉快！<br><br></p>
        <div class="scode"><textarea id="scode" placeholder="粘贴代码到此处"></textarea></div>
        <div><button id="btnColor">着色预览</button> <button id="btnCopy">复制着色源码</button><output id="msgBox"></output></div>
        <div class="mum" id="mum"><pre id="sBox"></pre></div>
</div>

<script>
let sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);

btnCopy.style.display = 'none';

let showMsg = (ele,msg) => {
        ele.value = msg;
        setTimeout(() => {
                ele.value = '';
        }, 1200);
};

btnColor.onclick = () => {
        if(scode.value) {
                mum.innerHTML = colorCodes(scode.value);
                let clcds = mum.querySelectorAll('cl-cd');
                clcds.forEach((clcd,key) => clcd.dataset.idx = key + 1);
                mum.style.display = 'block';
                btnCopy.style.display = 'inline-block';
        }else{
                showMsg(msgBox, '代码框中还没有代码');
        }
}

btnCopy.onclick = () => {
        let copiedStr = cssStyle.textContent = `<style>
        .mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
        .mum ::selection { background-color: rgba(0,100,100,.35); }
        .mum div { margin: 0; padding: 0; }
        .mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
        .mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
        .tRed { color: red; }
        .tBlue { color: blue; }
        .tGreen { color: green; }
        .tDarkRed { color: darkred; }
        .tMagenta { color: magenta; }
</style>

<div class="mum">
${mum.innerHTML}
</div>
`;
        if (navigator.clipboard) {
                navigator.clipboard
                        .writeText(copiedStr)
                        .then (() => {
                                showMsg(msgBox,'成功复制到剪切板！');
                        })
                        .catch(err => {
                                console.log(err);
                        });
        } else {
                let tbox = document.createElement('textarea');
                tbox.value = copiedStr;
                tbox.display = 'none';
                document.body.appendChild(tbox);
                tbox.focus;
                tbox.select();
                document.execCommand('copy');
                showMsg(msgBox,'复制到剪切板啦！');
                tbox.remove();
        }
        btnCopy.style.display = 'none';
};
</script>

马黑黑 发表于 2024-2-25 11:52

复制着色源码要通过按钮复制，手工复制预览框中的代码是原始代码。

着色源码是 CSS+HTML 格式，直接可用，自行渲染，不依赖JS资源。

马黑黑 发表于 2024-2-25 12:48

代码着色演示效果（二楼）：

A journey of the heart - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

说明：

看上去，和之前使用JS资源的没什么不同，但实际上，二楼的代码着色效果是不需要JS资源的，直接使用 CSS + HTML 结构的代码。

樵歌 发表于 2024-2-25 12:53

吃瓜吃瓜皮{:4_189:}

马黑黑 发表于 2024-2-25 12:56

樵歌 发表于 2024-2-25 12:53
吃瓜吃瓜皮

好吃多吃{:4_170:}

红影 发表于 2024-2-25 14:16

马黑黑 发表于 2024-2-25 11:52
复制着色源码要通过按钮复制，手工复制预览框中的代码是原始代码。

着色源码是 CSS+HTML 格式，直接可用 ...

黑黑的研究成果越来越完美了{:4_199:}

马黑黑 发表于 2024-2-25 16:51

红影 发表于 2024-2-25 14:16
黑黑的研究成果越来越完美了

这个，只是 colorcode 模块的应用方式，colorcode 才是核心。这里，colorcode 生成着色代码后，再将 相应的 CSS 加上，这样，着色的代码就有了样式，就可以脱离JS渲染出来。

南无月 发表于 2024-2-25 18:20

本帖最后由 南无月 于 2024-2-25 18:21 编辑

马黑黑 发表于 2024-2-25 12:48
代码着色演示效果（二楼）：

A journey of the heart - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (hua ...
{:4_199:}{:4_187:}经实测，这个程序全网第一的好用

南无月 发表于 2024-2-25 18:23

马黑黑 发表于 2024-2-25 11:52
复制着色源码要通过按钮复制，手工复制预览框中的代码是原始代码。

着色源码是 CSS+HTML 格式，直接可用 ...

着色源码自带程序，这个是真真没有想到。。。开始我以为它就是代码。。
真的厉害。。{:4_199:}

红影 发表于 2024-2-25 18:43

马黑黑 发表于 2024-2-25 16:51
这个，只是 colorcode 模块的应用方式，colorcode 才是核心。这里，colorcode 生成着色代码后，再将 相应 ...

这个模块听都没听到过，在黑黑的帖子里见识了{:4_187:}

马黑黑 发表于 2024-2-25 19:32

红影 发表于 2024-2-25 18:43
这个模块听都没听到过，在黑黑的帖子里见识了

这个模块是我自己做的

马黑黑 发表于 2024-2-25 19:32

南无月 发表于 2024-2-25 18:20
经实测，这个程序全网第一的好用

夸张了

马黑黑 发表于 2024-2-25 19:32

南无月 发表于 2024-2-25 18:23
着色源码自带程序，这个是真真没有想到。。。开始我以为它就是代码。。
真的厉害。。

{:4_172:}

南无月 发表于 2024-2-25 19:38

马黑黑 发表于 2024-2-25 19:32
夸张了

老师比较低调。。{:4_173:}

南无月 发表于 2024-2-25 19:39

马黑黑 发表于 2024-2-25 19:32


思路就不一样啊。我是觉得一般复制出来的代码就是做贴子用的。。
怎么也想不到是复制出一个程序呀。。。小白见识了。。

马黑黑 发表于 2024-2-25 19:39

南无月 发表于 2024-2-25 19:38
老师比较低调。。

低调长寿

马黑黑 发表于 2024-2-25 19:41

南无月 发表于 2024-2-25 19:39
思路就不一样啊。我是觉得一般复制出来的代码就是做贴子用的。。
怎么也想不到是复制出一个程序呀。。。 ...

没时间细看细研究，可以理解

马黑黑 发表于 2024-2-25 19:44

南无月 发表于 2024-2-25 18:23
着色源码自带程序，这个是真真没有想到。。。开始我以为它就是代码。。
真的厉害。。

严格讲没有带程序（或程序代码），它就是呢，带个CSS样式（规定HTML啥样呈现出来），源码呢就是原来程序生成的源码、没变。

红影 发表于 2024-2-25 19:48

马黑黑 发表于 2024-2-25 19:32
这个模块是我自己做的

哇，真没想到。黑黑太厉害了{:4_199:}

南无月 发表于 2024-2-25 19:50

马黑黑 发表于 2024-2-25 19:39
低调长寿

{:4_199:}好哒，好有道理

查看完整版本: 帖子代码在线着色（测试版）