Obsidian 코드블럭 색상 커스터마이징 변경 방법(CSS 스니펫으로 손쉽게 설정)

 

Obsidian은 마크다운 기반 노트 작성 도구로, 복잡한 데이터 관리와 생산성 향상에 유용한 도구입니다.

 

특히, 기술적 노트 작성과 코드블럭 커스터마이징, 그리고 다양한 플러그인 및 CSS 스니펫을 통해 더욱 개인화된 환경을 구축할 수 있습니다.

 

 

옵시디언을 효과적으로 활용하여 코드블럭의 언어별 색상 지정, 마크다운 노트 작성법 관리방안을 소개합니다.

 

옵시디언 코드블럭 언어색상 지정

 

Obsidian에서 코드블럭의 언어별 색상을 지정하는 기능은 기본적으로 테마 또는 CSS 커스터마이징을 통해 가능합니다.

 

Obsidian은 마크다운 기반이므로 코드블럭의 언어를 지정할 때 아래와 같이 사용할 수 있습니다.

 

```language
code
```

 

예를 들어, Python 코드블럭은 다음과 같습니다.

 

```python
print("Hello, World!")
```

 

 

 

코드블럭 색상 지정하기(CSS Snippets 사용)

 

Obsidian에서 특정 언어의 코드블럭 색상을 변경하려면 사용자 정의 CSS를 추가해야 합니다. 다음은 예시입니다.

1. Obsidian 폴더에서 Snippets 폴더를 엽니다.
2. my-snippet.css 파일을 만듭니다.
3. 다음과 같은 CSS 코드를 추가하여 각 언어의 색상을 변경할 수 있습니다.

/* Python 코드블럭 색상 변경 */
.cm-s-obsidian pre.HyperMD-codeblock.language-python {
    background-color: #2b2b2b; /* 배경색 */
    color: #ffa500; /* 텍스트 색상 */
}

/* JavaScript 코드블럭 색상 변경 */
.cm-s-obsidian pre.HyperMD-codeblock.language-javascript {
    background-color: #2b2b2b;
    color: #f1e05a;
}

 

CSS 파일을 저장한 후, Obsidian에서 설정(Settings) > 모양(Appearance) > CSS Snippets 메뉴로 이동하여 새로 만든 Snippet을 활성화합니다.

 

이렇게 하면 코드블럭에서 언어에 따라 색상이 지정됩니다.

 

 

코드블럭 외에도 Obsidian에서 추가로 커스터마이징하고 싶은 부분은?

 

Obsidian에서 코드블럭의 언어별 색상을 지정하는 방법에 대해 좀 더 자세히 설명하겠습니다.

Obsidian은 마크다운을 기반으로 한 노트 작성 애플리케이션이지만, 기본적으로 코드블럭에 대해 구체적인 색상 지정 기능은 제공하지 않습니다. 

 

그러나 Obsidian의 사용자들은 CSS를 사용하여 인터페이스와 기능을 확장할 수 있습니다. 특히, CSS 스니펫을 사용하면 코드블럭의 색상, 배경 등을 언어별로 커스터마이징할 수 있습니다.

 

단계별 설명

 

1. CSS Snippet 생성
CSS를 통해 코드블럭의 색상을 변경하려면 먼저 CSS Snippet을 만들어야 합니다.

2. Obsidian 설정 열기
Obsidian 왼쪽 하단의 설정(Settings) 메뉴로 들어갑니다.

3. Snippets 폴더 열기

• 설정 창에서 모양(Appearance) > CSS Snippets 섹션을 찾습니다.
• 그곳에서 "Snippets 폴더 열기(Open snippets folder)" 버튼을 클릭하여 스니펫을 저장할 폴더를 엽니다.

4. 새 CSS 파일 만들기
Snippets 폴더 안에 .css 파일을 만듭니다. 예를 들어, my-snippet.css라고 이름을 지정할 수 있습니다.

 

5. CSS 코드 작성
이제 코드블럭에 언어별로 색상을 지정하는 CSS 코드를 작성할 수 있습니다.

/* Python 코드블럭 색상 */
.cm-s-obsidian pre.HyperMD-codeblock.language-python {
    background-color: #2b2b2b; /* 배경색 */
    color: #ffa500; /* 텍스트 색상 */
}

/* JavaScript 코드블럭 색상 */
.cm-s-obsidian pre.HyperMD-codeblock.language-javascript {
    background-color: #2b2b2b;
    color: #f1e05a;
}

 

위 코드에서는 Python과 JavaScript 코드블럭에 대해 배경색과 텍스트 색상을 지정하고 있습니다. 

옵시디언의 코드블럭은 language-python과 같은 클래스명을 사용하여 언어를 식별할 수 있으며, 이를 통해 언어별로 다른 색상을 적용할 수 있습니다.

6. CSS Snippet 적용

1. CSS 코드를 작성한 파일을 저장한 후, Obsidian으로 돌아와서 다시 설정(Settings) > 모양(Appearance) > CSS Snippets로 이동합니다.
2. 방금 만든 스니펫 파일을 활성화합니다.
3. 이제 코드블럭에 언어별로 지정된 색상이 적용된 것을 확인할 수 있습니다.

7. 코드블럭 사용

 

마크다운 파일에서 코드블럭을 사용할 때, 언어를 지정해 주면 CSS가 적용됩니다.

```python
print("Hello, World!")
```

 

위처럼 Python을 지정하면 해당 코드블럭에 정의한 색상이 적용됩니다.

 

 

요약

 

1. Obsidian에서 코드블럭의 색상을 지정하려면 CSS Snippet을 사용해야 합니다.

2. 코드블럭의 언어를 지정하면 해당 언어에 맞는 색상으로 커스터마이징할 수 있습니다.

3. Snippet 파일을 만들고 설정에서 활성화하면 적용됩니다.