我欲乘风九万里
梦的起点
心灵之声
珊瑚礁
编码之舞
梦中的微风
项目编码
聚合登录文档
建议
AI助手
editor.md如何使代码样式超出屏幕宽度,让其滚动,
找到/editor.md/css/editormd.preview.css 在3339行增加 ```css .editormd-preview-container ol.linenums, .editormd-html-preview ol.linenums { color: #999; padding-left: 2.5em; overflow: auto; text-wrap: nowrap; } ``` 还有点小问题,就是滚动的那部分背景没有线条,待解决 #### editor.md 增加代码块copy功能,样式代码重写 ```javascript $('.editormd-preview-container ol.linenums, .editormd-html-preview ol.linenums').css({ overflow: 'auto', 'text-wrap': 'nowrap', }); $(".editormd-preview-container ol.linenums, .editormd-html-preview ol.linenums").each(function(index) { var maxWidth = 0; $(this).find("code").each(function() { var width = $(this).outerWidth(true); if (width > maxWidth) { maxWidth = width; } }); $(this).find('li.L1, li.L3, li.L5, li.L7, li.L9').css("width", maxWidth + "px"); // 给父级添加cope按钮 var button = $('<button>').text('copy'); button.css({ position: 'absolute', top: '3px', right: '3px', }); $(this).parent().append(button).css('position', 'relative'); button.on('click', function() { var code = $(this).prev()[0].innerText; navigator.clipboard.writeText(code); layer.msg('复制成功'); }); }); ``` 最终代码,弹窗是layer,请替换成其他的 ```javascript $('.editormd-preview-container ol.linenums, .editormd-html-preview ol.linenums').css({ overflow: 'auto', 'text-wrap': 'nowrap', }); function editorDeal (){ $(".editormd-preview-container ol.linenums, .editormd-html-preview ol.linenums").each(function(index) { var maxWidth = 0; $(this).find("code").each(function() { var width = $(this).outerWidth(true); if (width > maxWidth) { maxWidth = width; } }); if($(this).outerWidth(true)<maxWidth) { $(this).find('li.L1, li.L3, li.L5, li.L7, li.L9').css("width", maxWidth + "px"); } else { $(this).find('li.L1, li.L3, li.L5, li.L7, li.L9').css("width",''); } // 给父级添加cope按钮 var button = $('<button>').text('copy'); button.css({ position: 'absolute', top: '3px', right: '3px', }); $(this).parent().append(button).css('position', 'relative'); button.on('click', function() { var code = $(this).prev()[0].innerText; navigator.clipboard.writeText(code); layer.msg('复制成功'); }); }); } editorDeal () window.addEventListener('resize', function(event) { editorDeal () }); ```
ysian
我雾化科所
1
聚合登录之创建应用篇
2024-07-30
644
0
2
php函数之match
2024-07-29
581
0
3
聚合登录之常见问题
2024-07-30
489
0
4
聚合登录之前后端示例代码
2024-07-30
483
0
5
聚合登录之获取登录链接
2024-07-30
422
0
6
服务器瘦身
2023-11-01
413
5
7
centos下升级openssl
2023-11-30
412
0
8
我的第一篇博客
2023-09-28
401
0
9
supervisor的安装与使用
2023-11-02
382
0
10
editor.md 代码块没有下拉框
2023-10-06
352
2
PHP [9]
linux [4]
sh [1]
闲谈 [1]
css [2]
redis [2]
Cluster集群 [1]
git [1]
centos [1]
webman [2]
工具 [1]
OAuth2.0 [1]
项目 [1]
初始化 [1]
thinkphp [1]
Nginx [1]
往事 [1]
Mysql [1]
支付宝 [2]
抖音 [2]
qq [2]
聚合 [1]
登录 [1]
聚合登录 [4]
cache [1]
html [1]
queue [1]
Workerman版本
4.1.15
Webman版本
1.5.9
PHP版本
8.3.6
MYSQL版本
8.2.24
操作系统
CENTOS