设置code-header.language-label点击折叠#
- 设置悬停spacing扩展效果
</>
css
1.language-brackets {
2 /* 全属性切换过渡动画效果 */
3 transition: all 0.3s ease;
4}
5/* 悬停间距扩展,颜色高亮 */
6.language-label:hover .language-brackets {
7 letter-spacing: 3px;
8 color: var(--code-header-hover-color);
9}
10.language-label:hover .language-name {
11 color: var(--code-header-hover-color);
12}- js设置点击label切换chroma.collapsed
</>
javascript
1 document.querySelectorAll('.language-label').forEach(button => {
2 button.addEventListener('click', () => {
3 const codeBlock = button.closest('.code-block-wrapper');
4 const chroma = codeBlock?.querySelector('pre.chroma');
5 if (chroma) {
6 chroma.classList.toggle('collapsed');
7 }
8 else console.error('chroma折叠失败');
9 });
10 });- 设置pre.chroma.collapsed折叠样式
</>
css
1pre.chroma.collapsed{
2 /* 折叠方法:设置高度为0 */
3 max-height: 0 !important;
4 /* 去除溢出拖动条 */
5 overflow: hidden !important;
6 /* 去除顽固padding */
7 padding: 0 !important;
8}设置代码块换行按钮功能#
- 核心样式方案:把ln设置固定宽度,cl设置为block,固定左侧间距
</>
css
1pre.chroma .ln {
2 float: left;
3 /* 设置行号区域的宽度 */
4 width: 20px;
5 text-align: right;
6 margin-right: 10px;
7 user-select: none; /* 禁止行号被选中 */
8}
9
10pre.chroma .cl {
11 display: block;
12 margin-left: 30px; /* 与行号宽度一致 */
13}
14
15pre.chroma.wrap-lines .cl {
16 display: block;
17 margin-left: 30px; /* 与行号宽度一致 */
18 white-space: pre-wrap !important;
19}- js代码
</>
javascript
1 document.querySelectorAll('.code-block-wrapper').forEach(wrapper => {
2 // 为每个代码块创建换行状态存储
3 const preElement = wrapper.querySelector('pre.chroma');
4 if (preElement) {
5 // 默认从 localStorage 读取用户偏好
6 const wrapEnabled = localStorage.getItem('codeWrapEnabled') === 'true';
7 if (wrapEnabled) {
8 preElement.classList.add('wrap-lines');
9 const wrapButton = wrapper.querySelector('.wrap-button');
10 if (wrapButton) {
11 wrapButton.classList.add('active');
12 const span = wrapButton.querySelector('span');
13 if (span) span.textContent = '不换行';
14 }
15 }
16 }
17 });
18 // 换行按钮功能
19 document.addEventListener('click', function(e) {
20 if (e.target.closest('.wrap-button')) {
21 const button = e.target.closest('.wrap-button');
22 const codeBlock = button.closest('.code-block-wrapper');
23 const preElement = codeBlock.querySelector('pre.chroma');
24
25 if (preElement) {
26 preElement.classList.toggle('wrap-lines');
27 button.classList.toggle('active');
28
29 // 保存用户偏好
30 const isNowWrapped = preElement.classList.contains('wrap-lines');
31 localStorage.setItem('codeWrapEnabled', isNowWrapped.toString());
32
33 // 更新按钮文本
34 const span = button.querySelector('span');
35 if (span) {
36 span.textContent = isNowWrapped ? '换行' : '不换行';
37 }
38 }
39 }
40 });