mac加载css代码无效

疑问解答
1

mac加载css代码无效

遇到的问题

最新版本的obsidian，加载部分css代码失效。obsidian能够识别那些css文件，但加载后没有反应。

听起来有点蠢，但似乎是长一点的代码加载失效，但短一点的代码能够加载……

例如，修改行距的短代码能够运行

/* 编辑模式下的行距 */
.cm-line {
	 line-height: 2.2em;
}

/* 预览模式下的行距 */
.markdown-preview-view p{	
	 line-height: 2.2em;
}

但column-page代码行不通，从PKmer上复制过来，多次检查也没有找到问题

body {
  --column-page-width: 550px;
}

.column-v .column-page 
.column-page-v{
  & .markdown-preview-section {
    --file-line-width: 100% !important;

    & .snw-header-count-wrapper {
      right: unset;
    }

    column-gap: 2rem;
    column-width: var(--column-page-width) !important;
    column-rule: 2px dashed var(--background-modifier-border);
    column-fill: balance;
    /* 缩减底部空白 不然可能加载成空白页 */
    padding-bottom: 0px !important;
    min-height: unset !important;

    /* 字体大小和行内高度改变，你可以不改变，并删掉 */
    font-size: 18px !important;
    line-height: 160%;

    /* 标题更紧凑一点 */
    & h2, h3, h4, h5, h6 {
      margin-top: 10px;
      margin-bottom: 5px;
    }

    & p {
      break-inside: avoid;
    }

    /* 选择不分列的元素，默认为h1，hr */
    & h1, hr {
      column-span: all;
    }

    /* 多列布局后，部分列表圆点会错位，这样可以避免 */
    & .list-bullet {
      position: absolute;
    }
  }

  &.column-h2 h2 {
    column-span: all;
  }
}
.column-h .column-page 
.column-page-h{
  & .markdown-preview-section {
    --file-line-width: 100% !important;

    & .snw-header-count-wrapper {
      right: unset;
    }

    column-gap: 2rem;
    column-width: var(--column-page-width) !important;
    column-rule: 2px dashed var(--background-modifier-border);
    column-fill: auto;
    height: 100%;
    /* 缩减底部空白 不然可能加载成空白页 */
    padding-bottom: 0px !important;
    min-height: unset !important;

    /* 字体大小和行内高度改变，你可以不改变，并删掉 */
    font-size: 18px !important;
    line-height: 160%;

    /* 标题更紧凑一点 */
    & h2, h3, h4, h5, h6 {
      margin-top: 10px;
      margin-bottom: 5px;
    }

    /* 多列布局后，部分列表圆点会错位，这样可以避免 */
    & .list-bullet {
      position: absolute;
    }
  }
}
2

超长代码建议还是搁代码块里, 否则排版乱了不好看明白,

```css
(这里放很长的代码)
```

楼主直接贴在段落正文 --column-page-width: 就自动给替成 –column-page-width: (连字符变化了)


如果是指 PKMer_Obsidian 样式 - 分栏分列布局 (Column-Page) 和 Obsidian样式-分栏布局的主页面 - 经验分享

我试了一下, 能用啊,
需要注意在 Style Settings 里启用分栏, 以及在需要效果的具体笔记里要标明 cssclasses

---
cssclasses: column-page
---
笔记正文
笔记正文
3

好的，谢谢你。确实是这样设置的，我再检查检查代码

4

可能MAC系统的Obsidian不支持CSS的预处理，因为这个CSS采用了一部分的CSS预处理的嵌套，非标准的CSS语法，以下是重新编译后的CSS，你可以试试。

/* @settings
name: 【分栏】分栏布局(Column-Page)
id: ColumnPage
settings:
  - id: column-page
    title: 分列布局(Column-Page)
    type: class-toggle
    addCommand: true
  - id: column-page-width
    title: 分栏宽度
    description: 分栏最小宽度，单位为px
    type: variable-number
    default: 550
    format: px
  - id: column-page-type
    title: 默认分布模式
    type: class-select
    allowEmpty: false
    options:
      - value: column-h
        label: 横向模式，高度不变，不能跨列
      - value: column-v
        label: 纵向模式，宽度不变，可以跨列
    default: column-h
*/
/*! 分栏布局页面  by 熊猫 */
body {
  --column-page-width: 550px;
}
.column-v.column-page .markdown-preview-section,
.column-v .column-page .markdown-preview-section,
.column-page-v .markdown-preview-section {
  --file-line-width: 100% !important;
  column-gap: 2rem;
  column-width: var(--column-page-width) !important;
  column-rule: 2px dashed var(--background-modifier-border);
  column-fill: balance;
  padding-bottom: 0px !important;
  min-height: unset !important;
  font-size: 18px !important;
  line-height: 160%;
}
.column-v.column-page .markdown-preview-section h2,
.column-v .column-page .markdown-preview-section h2,
.column-page-v .markdown-preview-section h2,
.column-v.column-page .markdown-preview-section h3,
.column-v .column-page .markdown-preview-section h3,
.column-page-v .markdown-preview-section h3,
.column-v.column-page .markdown-preview-section h4,
.column-v .column-page .markdown-preview-section h4,
.column-page-v .markdown-preview-section h4,
.column-v.column-page .markdown-preview-section h5,
.column-v .column-page .markdown-preview-section h5,
.column-page-v .markdown-preview-section h5,
.column-v.column-page .markdown-preview-section h6,
.column-v .column-page .markdown-preview-section h6,
.column-page-v .markdown-preview-section h6 {
  margin-top: 10px;
  margin-bottom: 5px;
}
.column-v.column-page .markdown-preview-section h1,
.column-v .column-page .markdown-preview-section h1,
.column-page-v .markdown-preview-section h1,
.column-v.column-page .markdown-preview-section hr,
.column-v .column-page .markdown-preview-section hr,
.column-page-v .markdown-preview-section hr {
  column-span: all;
}
.column-v.column-page .markdown-preview-section .list-bullet,
.column-v .column-page .markdown-preview-section .list-bullet,
.column-page-v .markdown-preview-section .list-bullet {
  position: absolute;
}
.column-v.column-page.column-h2 h2,
.column-v .column-page.column-h2 h2,
.column-page-v.column-h2 h2 {
  column-span: all;
}
.column-h.column-page .markdown-preview-section,
.column-h .column-page .markdown-preview-section,
.column-page-h .markdown-preview-section {
  --file-line-width: 100% !important;
  column-gap: 2rem;
  column-width: var(--column-page-width) !important;
  column-rule: 2px dashed var(--background-modifier-border);
  column-fill: auto;
  height: 100%;
  padding-bottom: 0px !important;
  min-height: unset !important;
  font-size: 18px !important;
  line-height: 160%;
}
.column-h.column-page .markdown-preview-section h2,
.column-h .column-page .markdown-preview-section h2,
.column-page-h .markdown-preview-section h2,
.column-h.column-page .markdown-preview-section h3,
.column-h .column-page .markdown-preview-section h3,
.column-page-h .markdown-preview-section h3,
.column-h.column-page .markdown-preview-section h4,
.column-h .column-page .markdown-preview-section h4,
.column-page-h .markdown-preview-section h4,
.column-h.column-page .markdown-preview-section h5,
.column-h .column-page .markdown-preview-section h5,
.column-page-h .markdown-preview-section h5,
.column-h.column-page .markdown-preview-section h6,
.column-h .column-page .markdown-preview-section h6,
.column-page-h .markdown-preview-section h6 {
  margin-top: 10px;
  margin-bottom: 5px;
}
.column-h.column-page .markdown-preview-section .list-bullet,
.column-h .column-page .markdown-preview-section .list-bullet,
.column-page-h .markdown-preview-section .list-bullet {
  position: absolute;
}

我这边使用该CSS也正常使用。
PixPin_2024-09-06_10-25-14

5

非常感谢！我再试一试～