Skip to content

Commit

Permalink
Merge pull request #856 from PandaNocturne/24.09.08_panda
Browse files Browse the repository at this point in the history
Excalidraw Script Install Market:轻松管理和获取 Excalidraw 脚本
  • Loading branch information
juestchaos authored Sep 11, 2024
2 parents c4cb368 + 07041f2 commit dcbf9cf
Show file tree
Hide file tree
Showing 11 changed files with 696 additions and 120 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
uid: 20240910165133
title: Obsidian 样式 - 核心大纲 outline 标题显示自动编号
tags: [css, outline]
description: " Outline 进行优化的CSS,自动对标题进行编号"
author: 熊猫别熬夜
type: other
draft: false
editable: false
modified: 20240910173714
---

# Obsidian 样式 - 核心大纲 outline 标题显示自动编号

![24.09.10_Obsidian样式-核心大纲outline标题显示自动编号.md](https://cdn.pkmer.cn/images/202409101652696.png!pkmer)

对 Obsidian 的核心插件 Outline 进行优化,自动对标题进行编号。请注意,该编号不会实际修改文档中的标题编号。

> 该代码改编于 [obsidian-visually-numbered-headings:窗口计数失效](https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16)
## 样式一:从一级标题开始计数

```css
/* https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16 */
.workspace-leaf-content[data-type="outline"] {
counter-reset: rootCounter;

.tree-item .tree-item-self .tree-item-inner::before {
content: counters(rootCounter, ".") ". ";
counter-increment: rootCounter;
}

/* container of the ohter headings. */
/* NOTE: It is not .outline anymore. So we need a new counter */
.tree-item-children {
counter-reset: innerCounter;
}

.tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
content: counters(rootCounter, ".") "."counters(innerCounter, ".") ". ";
counter-increment: innerCounter;
}
}

```

## 样式二:从二级标题开始计数

```css
/*! Visually Numbered Headings */
/* https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16 */

/* container of first layer headings. */
.workspace-leaf-content[data-type="outline"] {
counter-reset: rootCounter;
tree-item .tree-item-self .tree-item-inner::before {
/* content: counters(rootCounter, ".") " "; */
counter-increment: rootCounter;
}

/* container of the ohter headings. */
/* NOTE: It is not .outline anymore. So we need a new counter */
.tree-item-children {
counter-reset: innerCounter 0;
}

.tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
/* content: counters(rootCounter, ".") "." counters(innerCounter, ".") " "; */
content: counters(innerCounter, ".") " ";
counter-increment: innerCounter;
}
}
```

## 拓展样式:文件大纲显示编号

![24.09.10_Obsidian样式-核心大纲outline标题显示自动编号.md](https://cdn.pkmer.cn/images/202409101737437.png!pkmer)

```css
/* https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16 */
.workspace-leaf-content[data-type="file-explorer"] {
counter-reset: rootCounter;

.tree-item .tree-item-self .tree-item-inner::before {
content: counters(rootCounter, ".") ". ";
counter-increment: rootCounter;
}

/* container of the ohter headings. */
/* NOTE: It is not .outline anymore. So we need a new counter */
.tree-item-children {
counter-reset: innerCounter;
}

.tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
content: counters(rootCounter, ".") "."counters(innerCounter, ".") ". ";
counter-increment: innerCounter;
}
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ uid: 20231202002300
title: Obsidian 样式:调整图片不同布局样式
tags: [图片, CSS自定义]
description: Obsidian 样式 - 调整图片不同布局样式,将图片渲染为圆形或者控制图片在文本的左侧或者右侧,可组合。
author: 余月鱼鸽
author: 余月鱼鸽,熊猫别熬夜
type: other
draft: false
editable: false
modified: 20240119110622
modified: 20240909145310
---

# Obsidian 样式:调整图片不同布局样式
Expand All @@ -26,9 +26,9 @@ modified: 20240119110622
注:以下测试图片来自:英国 1927 剧团的话剧《roots》的剧照

> [!note] 1.将图片变成圆形
> 插入图片后,在图片名后面添加 `#O` 并设置自己期望的圆形比例 ` |200x200`
> 插入图片后,在图片名后面添加 `|O` 并设置自己期望的圆形比例 ` |200x200`
>
> 设置完的配置:`![[DSC04693.jpg#O|200x200]]`
> 设置完的配置:`![[DSC04693.jpg|O|200x200]]`
**具体效果如下**

Expand All @@ -39,15 +39,15 @@ modified: 20240119110622
> 2. 设置圆形大小的参数必须是小写的 x,如上图为:200x200,数字键盘的 `*` 以及大写的 `X` 不生效
> [!note] 2.控制图片在文本的左侧或者右侧。
> 1. 插入图片后,在图片名后面添加 `#L` 可控制图片出现在左侧;格式为:`![[DSC04693.jpg#L|150]]`
> 2. 插入图片后,在图片名后面添加 `#R` 可控制图片出现在右侧;格式为:`![[DSC04693.jpg#R|150]]`
> 1. 插入图片后,在图片名后面添加 `#L` 可控制图片出现在左侧;格式为:`![[DSC04693.jpg|L|150]]`
> 2. 插入图片后,在图片名后面添加 `#R` 可控制图片出现在右侧;格式为:`![[DSC04693.jpg|R|150]]`
**具体效果如下**

![Obsidian 样式 - 调整图片不同布局样式](https://cdn.pkmer.cn/images/202312020017825.png!pkmer)

> [!note] 3.两种效果混合使用
> 例:插入图片后,在图片名后面添加 `#O` 设置图片为圆形后,后面添加 `L` 可控制图片出现在左侧;后面添加 `R` 可控制图片出现在右侧;格式为:`![[DSC04693.jpg#OL|200x200]]`
> 例:插入图片后,在图片名后面添加 `|O` 设置图片为圆形后,后面添加 `L` 可控制图片出现在左侧;后面添加 `R` 可控制图片出现在右侧;格式为:`![[DSC04693.jpg|OL|200x200]]`
**具体效果如下**

Expand All @@ -57,88 +57,113 @@ modified: 20240119110622

```css
/* 片段来自:pkmer知识管理交流群,@熊猫别熬夜*/
/* 将所有图片默认居中 */
body:not(.list-image-control-off)
:is(.HyperMD-list-line, ul)
.image-embed.image-embed
img:not([width]):not([class*="emoji"]){
display: flex;
/* justify-content: center; */
/* align-items: center; */
max-width: 90%;
margin: 0 auto;
object-fit: contain;
background-color: transparent !important;
}

/* 视频 */
video {
display: block;
margin: 0 auto; /* 设置左右间距为自适应,上下间距为零 */
width: 90%;
}

/* === Image Float === */
body {
--float-left-margin: 4px 12px 4px 12px;
--float-right-margin: 4px 12px 4px 12px;
--float-snw-display: none;
}
span[src$="O"] img {
object-fit: cover;
border-radius: 50%;
}

span[src$="OL"] img {
object-fit: cover;
border-radius: 50%;
float: left;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
}
.view-content .markdown-preview-sizer {
div:has(img)::before,
div:has(img)::after {
content: " ";
clear: both;

span[src$="OR"] img {
object-fit: cover;
border-radius: 50%;
float: left;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
}
&>div:has(ol) {
clear: none;
}
}

span[src$="L"] img {
float: left;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
div:has(img)::after {
display: table;
}
}

span[src$="R"] img {
float: right;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
.view-content .markdown-source-view,
.view-content .markdown-preview-sizer {
span[alt="O"] img {
object-fit: cover;
border-radius: 50%;
}

span[alt="OL"] img {
object-fit: cover;
border-radius: 50%;
float: left;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
}

span[alt="OR"] img {
object-fit: cover;
border-radius: 50%;
float: left;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
}

span[alt="L"] img {
float: left;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
}

span[alt="R"] img {
float: right;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
}

/* 行内显示 */
span[alt="I"] img:not([width]) {
float: unset;
text-align: left;
height: 2rem !important;
margin: 0px 0.2rem 0px 0.2rem !important;
transform: translateY(0.3rem);
margin-block: unset;
display: inline !important;
}
}

/* 独占一行 */
span[src$="IL"] img {
float: unset;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
/* Banner图片 */
p:has(span[alt="banner"]) {
column-span: all;
margin: 0;
/* margin-bottom: 15px; */
padding: 0;
overflow: hidden;
user-select: none;
/* pointer-events: none; */
}
span[src$="IR"] img {
float: unset;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;

span[alt="banner"] img {
width: 100%;
object-fit: cover;
object-position: center;
;
height: 200px;
/* 抄自https://geek-docs.com/css/css-tutorials/t_adding-a-mask-to-an-image-using-css.html */
mask-image: linear-gradient(to top,
transparent 50%,
var(--background-primary) 50%);
}


```

- 24.09.09:Change Log
- 新增行内显示模式,调用格式为: `![[image.png|I]]`,像emoji一样将图片嵌入至文档内。
- ![image.png](https://cdn.pkmer.cn/images/202409091457490.png!pkmer)
- 图片浮动格式设置为 `![[image.png|OL|200x200]]` 这种类型了,图片大小可以不加,直接 `![[image.png|L]]` 这样就行。
- 图片与要并排的文字之间不要有空行就行。
9 changes: 6 additions & 3 deletions 10-Obsidian/Obsidian外观/Obsidian的CSS代码片段.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ author: OS,PKMer
type: awesome
draft: false
editable: false
modified: 20240905145641
modified: 20240910165513
---

# Obsidian 的 CSS 代码片段
Expand Down Expand Up @@ -49,8 +49,6 @@ Obsidian 还支持一种外部样式代码引用的方式。

### 界面元素

- [[Obsidian样式-像VSCode一样显示搜索替换框]]
- [[Obsidian样式-实时编辑下大纲等级符号居右以及Border标题CSS]]
- [[Obsidian样式-悬浮两侧菜单栏]]
- [[Obsidian样式-悬浮侧边栏自动弹出,提升工作流效率]]
- [[Obsidian样式-专注标签页边框]]
Expand All @@ -59,6 +57,11 @@ Obsidian 还支持一种外部样式代码引用的方式。
- [[Obsidian样式-多行标签页堆叠显示]]
- [[Obsidian样式-全宽的图谱搜索框样式]]

### 大纲 (Outline)

- [[Obsidian样式-实时编辑下大纲等级符号居右以及Border标题CSS]]
- [[Obsidian样式-核心大纲outline标题显示自动编号]]

### 编辑器

- [[Obsidian样式-minimal主题Cards卡片布局]]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
uid: 20240908193817
title: Excalidraw LateχEditor:用于画板的 Lateχ编辑器
tags: [Excalidraw脚本, latex]
description: Excalidraw LateχEditor:用于画板的 Lateχ编辑器
author: 熊猫别熬夜
type: other
draft: false
editable: false
modified: 20240908193853
---

# Excalidraw LateχEditor:用于画板的 Lateχ编辑器

![24.09.08_自定义Excalidraw脚本-LateχEditor用于画板的新Lateχ编辑器.md](https://cdn.pkmer.cn/images/202409081937363.png!pkmer)

## 功能

1. 可视化编辑 Lateχ公式:直接运行脚本使用。
2. 可二次编辑 Lateχ公式:选中一个 latex 公式后,在运行脚本使用。

## 安装链接

````
```excalidraw-script-install
https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/LatexEditor.md
```
````
Loading

0 comments on commit dcbf9cf

Please sign in to comment.