옵시디언 가이드
추천 플러그인
노트관리방법론
플러그인 사전

다다

옵시디언 활용, 개인 지식 관리

분류 전체보기 (352)

로그인

로그아웃 글쓰기 관리

Homemade Source/Css Snippets 29

[CSS Snippet] Vicious 테마 callout Vicious 테마 callout 스타일 CSS Snippet입니다. 예시 CSS 코드 .theme-dark, .theme-light { --callout-title-padding: 4px 12px; --callout-padding: 0; --callout-radius: var(--radius-m); } /*================================================*/ /* Root Colors /*================================================*/ :root { --800: #000000e0; --800-RGB: 8, 9, 14; --700: #17181e; --700-RGB: 23, 24, 30; --600: #292a2f; --60..
Homemade Source/Css Snippets 2024.02.25 0
[CSS Snippet] 단락 앞과 뒤의 간격을 사용자 정의 단락 앞과 뒤의 간격을 Style Settings으로 정의하는 Css snippet입니다. 이 스니펫은 Things 테마의 단락조절부분만 떼내온 것으로 편집모드에서 단락을 조절할 수 있습니다. Style Settings 에서 조절할 수 있다는 장점이 있습니다. 예시 Css Snippet body { --paragraph-margin-top:10px; --paragraph-margin-bottom:5px; } div:not(.HyperMD-header,.HyperMD-list-line).cm-line { padding-top:var(--paragraph-margin-top) !important; padding-bottom:var(--paragraph-margin-bottom) !important; } di..
Homemade Source/Css Snippets 2024.02.24 0
[CSS Snippet] PLN 테마 callout PLN 테마 callout 스타일입니다. 예시 CSS 코드 .theme-light, .theme-dark { --color-red-rgb: 191, 97, 106; --color-orange-rgb: 208, 135, 112; --color-yellow-light-rgb: 235, 203, 139; --color-yellow-dark-rgb: 228, 184, 96; --color-green-rgb: 163, 190, 140; --color-purple-rgb: 180, 142, 173; --color-sea-green-rgb: 143, 188, 187; --color-cyan-rgb: 136, 192, 208; --color-frost-rgb: 129, 161, 193; --color-blue-rgb:..
Homemade Source/Css Snippets 2024.02.24 0
[CSS Snippet] 태그 색상 변경하기 옵시디언의 태그 색상 변경 css snippet입니다. 읽기모드에서만 대응합니다. 예시 CSS 코드 .theme-light { --font-color-1: lch(40 36 125); --font-color-2: lch(40 36 80); --font-color-3: lch(39 36 170); --font-color-4: lch(40 36 35); --font-color-5: lch(40 36 305); --font-color-6: lch(39 36 260); --font-color-7: lch(40 36 350); --background-color-1: lch(87 16 125); --background-color-2: lch(87 16 80); --background-color-3: lch(87 1..
Homemade Source/Css Snippets 2024.02.21 0
[CSS Snippet] Live Preview 모드에서 헤딩 레벨 표시 옵시디언 Live Preview 모드에서 헤딩 레벨을 표시해주는 CSS snippet입니다. 예시 CSS 코드 .is-live-preview div:not(.HyperMD-header.HyperMD-header-1.cm-line.cm-active) > span.cm-header.cm-header-1::before, .is-live-preview div:not(.HyperMD-header.HyperMD-header-2.cm-line.cm-active) > span.cm-header.cm-header-2::before, .is-live-preview div:not(.HyperMD-header.HyperMD-header-3.cm-line.cm-active) > span.cm-header.cm-header-3:..
Homemade Source/Css Snippets 2024.02.21 0
[CSS Snippet] Mermaid를 노트 가로사이즈에 맞게 조정하기 가로사이즈에 맞게 조정하기 Mermaid 다이어그램의 가로 길이가 옵시디언의 노트 가로 사이즈보다 길 경우, 그래프 오른쪽이 짤려나온다. .mermaid svg { max-width: 100%; height: auto; } 위 CSS를 적용하면, 다음과 같이 노트 가로 사이즈에 맞춰진다. 가운데로 정렬 .mermaid svg{ display: block !important; margin: 0 auto !important; } Mermaid 다이어그램의 기본값은 왼쪽 정렬입니다. 위 CSS Snippet은 다이어그램을 가운데 정렬로 변경합니다.
Homemade Source/Css Snippets 2024.02.17 0
[CSS Snippet] 내부링크에 아이콘 넣기 옵시디언 내부링크에 아이콘을 넣는 CSS Snippet입니다. 내부링크에 아이콘 넣기 예시 CSS 코드 .markdown-source-view.mod-cm6 .cm-underline::before, .markdown-preview-view a.internal-link::before { margin-right: 4px; margin-left: 2px; content: ''; background-image: url("data:image/svg+xml,%3Csvg t='1626093724345' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3856' width='200' height='200..
Homemade Source/Css Snippets 2024.02.17 0
[CSS Snippet] 편집모드에서 코드블록에 줄 번호 표시 편집 모드에서 코드블록에 줄 번호를 표시해주는 CSS Snippet입니다. 편집 모드에서만 가능한 CSS입니다. 읽기 모드에서 사용하시려면 Codeblock 관련 플러그인을 사용하셔야 됩니다. 예시 CSS 코드 .HyperMD-codeblock-begin { counter-reset: line-numbers; } .HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) { padding-left: 3em; position: relative; } .HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after { ..
Homemade Source/Css Snippets 2024.02.11 0
[CSS Snippet] 인라인 코드 스타일 변경하기 인라인코드 스타일 변경하는 Snippet입니다. 예시 CSS 코드 div p code, .markdown-source-view span.cm-inline-code { padding:4px !important; border-radius: 5px; color:black; background-color: #f6f1c6 !important; border:none; }
Homemade Source/Css Snippets 2024.02.11 0
[CSS Snippet] 하이라이트(Highlight) 스타일 변경하기 하이라이트(Highlight) 스타일 변경하는 CSS Snippet입니다. 스타일 종류 Lowlight 스타일 div p mark, .markdown-source-view div.cm-line span.cm-highlight { background: #FFB8EBA6; border-radius: 0; background-image: linear-gradient( 360deg, rgba(255, 255, 255, 0) 40%, var(--background-primary) 40% ) !important; color: var(--text-normal); } Floating 스타일 div p mark, .markdown-source-view div.cm-line span.cm-highlight { backgr..
Homemade Source/Css Snippets 2024.02.10 0
[CSS Snippet] 찾기(Find)와 바꾸기(Replace)를 박스 스타일로 변경 찾기(Ctrl+F), 바꾸기(Ctrl+H)를 변경하는 CSS Snippet입니다. 예시 CSS 코드 body { --search-border-color: var(--text-accent); --search-top: calc(var(--header-height) + var(--size-4-4)); --search-right: var(--size-4-4); --background-modifier-border-focus: hsl( var(--accent-h), calc(var(--accent-s) - 4%), calc(var(--accent-l) + 4%) ); } .obsidian-search-match-highlight { background-color: var(--background-secondary);..
Homemade Source/Css Snippets 2024.02.09 0
[CSS Snippet] 코드블록 스타일(Light mode) 코드블럭을 변경하는 CSS Snippet입니다. Light mode 테마에서만 사용가능합니다. 예시 사용 방법 일반 코드블럭에서는 해당 스타일이 출력이 안되고 ---옆에 언어를 작성해줘야 출력됩니다. ---javascript --- CSS 코드 .theme-light code[class*=language-], .theme-light pre[class*=language-] { color: #000; background: 0 0; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break:..
Homemade Source/Css Snippets 2024.02.04 0
[CSS Snippet] 검은색 테마 코드블록 라이트, 다크모드와 상관없이 검은색 코드블록을 구현해주는 Snippet입니다. 예시 사용 방법 일반 코드블럭에서는 해당 스타일이 출력이 안되고 ---옆에 언어를 작성해줘야 출력됩니다. ---javascript --- CSS Snippet .markdown-reading-view code[class*=language-], .markdown-reading-view pre[class*=language-] { color: #f8f8f2; background: 0 0; text-shadow: 0 1px rgba(0, 0, 0, .3); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: ..
Homemade Source/Css Snippets 2024.02.03 0
[CSS Snippets] Obsidian CSS Snippets Collection 옵시디언 유저들이 만든 css snippets 모음입니다. https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets GitHub - r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets: Welcome to the ObsidianMD CSS Snippets repository, a collection of CSS code sn Welcome to the ObsidianMD CSS Snippets repository, a collection of CSS code snippets to enhance the user interface elements of ObsidianMD - GitHub - r-u-s-h-i-k-e-s-h/Obsidian-C..
Homemade Source/Css Snippets 2024.01.28 0

1 2

Obsidian Page

옵시디언 기초 가이드

노트 관리 방법론

플러그인 가이드

플러그인 사전

최근 글

인기 글

© Copyright 2024 Jnik

Uploading...

티스토리툴바