[옵시디언] Obsidian 코드 블럭 노션(notion) 처럼 만들기

 

 

 

옵시디언에서 노션 스타일의 코드 블록으로 커스터마이징 하기

📌 서론

옵시디언 코드 블럭의 문제점을 알아보고 커스텀 css를 적용시켜 노션처럼 만들어 보자

 

1. 옵시디언 코드 블록의 문제점

• 나는 옵시디언에서도 코드를 이쁘게 보고 싶은데 코드의 길이가 길어지니 읽기 모드에서 코드가 강제로 한 칸 내려가는 현상이 발생했다.

옵시디언 코드블럭

같은 코드를 노션에 가지고가면 이렇게 나온다.

• 노션에서는 "wrap code" 설정을 하면 코드가 길어도 다음줄로 잘려서 넘어가지 않고 코드블록 하단에 좌우 스크롤이 생성되면서 코드를 한눈에 볼 수 있도록 해준다. (가독성이 좋다.)

노션 코드블럭

 

2. 커스텀 css를 만들어서 코드 블록 노션처럼 만들기

환경설정으로 이동한다.

• 옵시디언 좌측 하단의 톱니바퀴 모양 버튼을 누른다.

옵시디언 환경설정

"테마" 메뉴 선택하기

• 환경설정 좌측의 메뉴바에서 "테마" 메뉴를 선택하고 맨 아래로 스크롤한다.

옵시디언 환경설정 - 테마 설정

CSS 스니펫 설정하기

• "css 스니펫 설정" 우측의 "폴더" 모양의 아이콘을 클릭한다.

css 스니팻 설정

본인이 옵시디언 저장소로 설정한 경로에서 snippets 폴더 열기

• 이 snippets 폴더에 최초에는 아무런 css 파일도 없을 텐데 위에 내가 한 것처럼 obsidian.css 파일을 만들어 줘야 한다.

옵시디언 snippets 폴더 경로

 

3. obsidian.css 파일 만들기

css파일을 만드는 방법

1. sublimeText를 통해 코드를 작성하고 저장할 수 있다.
2. vsCode에서 snippets폴더 경로를 열어준 다음 파일을 생성하고 코드를 작성한다.
3. 터미널에서 snippets폴더에 들어간 다음 vim 에디터를 사용하여 css 파일을 생성한다.

나는 3번 터미널에서 vim을 사용하는 방법으로 진행했다. 그래서 내가 진행한 대로 터미널로 설명할 예정이지만 vsCode를 사용하는 방법이 가장 간단하니 snippets 폴더를 vsCode로 열고 obsidian.css 파일을 생성 및 코드를 작성한 다음 저장하는 방법을 추천한다.

이제 obsidian.css 파일을 생성해 보자

1. 터미널(iterm)에서 snippets 폴더 경로로 이동한다. (위의 finder에 적힌 경로를 보고 따라 들어가면 된다.)

터미널에서 snippets 경로로 이동하기

2. snippets 폴더 안에서 vim 에디터로 obsidian.css를 입력해서 파일을 생성한다.

vim obsidian.css

3. obsidian.css 파일 내부에 css 코드를 작성해 준다. (vim 에디터는 i를 입력하면 내용 작성이 가능하다.)

• 다 적은 후에는 [esc클릭 -> :wq! 입력 후 엔터]를 진행하여 vim 에디터를 저장하고 나간다.

.code, pre {
    word-wrap: break-word;
    white-space: pre;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
}

/* 이게 있어야 줄바꿈이 됨 /
pre > code, code[class="language-"] {
    white-space: pre !important;
}

vim 에디터

4. snippets 폴더에 obsidian.css 파일이 제대로 저장되었는지 확인한다.

ls -arlth

• 아래와 같이 obsidian.css 파일이 보인다면 제대로 저장된 것이다.

obsidian.css파일 저장되었는지 확인하기

 

4. 옵시디언에 커스텀 css 적용하기

css 스니펫 "새로고침"하기

• 다시 메뉴에 들어가서 "테마"로 이동한 후 맨 아래로 스크롤한다. 그리고 css 스니펫에서 "새로고침" 아이콘을 클릭한다.

css 스니팻 새로고침

생성한 css파일 확인하기

• 방금 생성한 css 파일이 보일 것이다. (꼭 snippets 폴더에 obsidian.css파일을 생성해줘야 한다.)

css 파일 선택하기

생성한 css 파일 적용하기

• 우측의 토글을 클릭해서 css파일을 적용시킨다. (완료)

토글 클릭

 

5. 코드블록에 커스텀 css가 적용되었는지 확인

커스텀 css 적용여부 확인하기 (코드 블럭 확인)

• 아래와 같이 코드블록이 수정되었다. (스크롤도 캡처하고 싶지만 너무 빨리 사라져 버려서 캡처를 못했다.)
• 이제 커스텀 css가 적용되어 노션처럼 코드 블록에 코드가 길어지면 하단에 좌우 스크롤바가 생성된다.

obsidian.css 적용여부 확인

주의사항

• 이 커스텀 css를 적용하면 옵시디언에서 작성한 글을 확인하는 "읽기 모드"에만 적용된다.
• 글을 작성하는 "작성 모드"에서는 코드가 줄 바꿈이 되어 보이지 않고 아래로 내려간 채로 작성이 되니 적용이 되지 않았다고 생각할 수도 있다. 그러니 꼭 "읽기 모드"에서 css 적용 여부를 확인해 보자