【已解决】如何修改代码块的默认宽度

[css] 代码块滚动时语言和按钮固定在编辑器顶部 - JeffreyChen 的回帖

我也摸索出来一个方式，在借鉴了 MAC 风格代码下进行了魔改，增加了拖拽功能，样式如下

美化样式

代码片段 1

/* 主题模式下的代码块背景设置 */
html[data-theme-mode=light] {
  --zhi-code-tab-bg: #fff;           /* 代码标签背景：白色 */
  --zhi-code-content-bg: #f8f9fa;    /* 代码内容背景：浅灰色 */
}
html[data-theme-mode=dark] {
  --zhi-code-tab-bg: #000;           /* 代码标签背景：黑色 */
  --zhi-code-content-bg: #1e1e1e;    /* 代码内容背景：深灰色 */
}
html[data-theme-mode=green] {
  --zhi-code-tab-bg: #f5f5d5;        /* 代码标签背景：淡黄绿色 */
  --zhi-code-content-bg: rgba(27,31,35,.05);  /* 代码内容背景：极淡黑色透明背景 */
}

/* 隐藏语言标识后的默认箭头和复制按钮 */
#preview .protyle-action__language {
  right: .2rem !important;
}
#preview .protyle-action__language:after {
  display: none !important;
}
#preview .protyle-action__copy {
  display: none !important;
}

/* 代码块外观样式 */
.code-block {
  border: .5px solid var(--b3-border-color) !important;  /* 边框颜色 */
  border-radius: 5px !important;                         /* 圆角边框 */
  padding-top: 32px !important;                          /* 顶部内边距 */
  background: var(--zhi-code-tab-bg);                    /* 背景颜色使用主题变量 */

  width: 25%;                                            /* 代码块默认宽度 25% */
  max-width: 100%;                                       /* 代码块最大宽度 100% */
  resize: horizontal;                                    /* 宽度可拖动 */
  overflow: auto;                                        /* 字符超出宽度时自动滚动 */
}

/* 代码高亮区域样式 */
.b3-typography div.hljs,
.protyle-wysiwyg div.hljs {
  color: var(--b3-theme-on-background);                  /* 字体颜色 */
  padding: 8px;
  font-family: var(--b3-font-family-code);               /* 字体族 */
  border-top: .5px solid var(--b3-border-color);         /* 顶部边框 */
  border-radius: 0 0 5px 5px !important;                  /* 下方圆角 */
  background: var(--zhi-code-content-bg);                /* 背景颜色 */
}




/* Jupyter 自定义代码块按钮调整 */
.protyle-wysiwyg [data-node-id][custom-jupyter-block-type][custom-jupyter-block-type=code]:after {
  top: 5px;
  left: 8.5em;
}
.protyle-wysiwyg [data-node-id][custom-jupyter-block-type][custom-jupyter-block-type=code]:before {
  top: 9px;
  left: 7.5em;
}

/* 行号样式 */
.protyle-linenumber__rows {
  width: 40px;
  padding: 8px 4px 4px;
  margin-bottom: 0;
  border-top: .5px solid var(--b3-border-color);
  font-family: var(--b3-font-family-code);
  border-top-left-radius: 0;
}
.protyle-linenumber__rows span:before {
  color: #808007;
}

/* 语言显示按钮样式（右上角） */
.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
  margin-top: 0;
  position: absolute;
  right: 3.5em;
  border-radius: 1px;
  opacity: 1 !important;
  font-family: var(--b3-font-family-code);
}
.b3-typography .code-block .protyle-action .protyle-action__language:after,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language:after {
  content: "›"; /* 右箭头 */
  font-family: var(--b3-font-family-code);
  color: #80808080;
  opacity: 1;
}

/* 行内代码块样式 */
code.hljs {
  border: 1px solid var(--b3-border-color1);
}

/* 图标和语言按钮通用样式 */
.b3-typography .code-block .protyle-action .protyle-icon,
.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-icon,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
  opacity: 1 !important;
  background-color: transparent !important;
}
.b3-typography .code-block .protyle-action .protyle-icon svg,
.b3-typography .code-block .protyle-action .protyle-action__language svg,
.protyle-wysiwyg .code-block .protyle-action .protyle-icon svg,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language svg {
  color: gray;
}