긴 Markdown 코드 줄을 온전히 표시하려면 코드 자체는 그대로 두고 표시 방식을 조정하세요. 이 가이드에서는 Mac 사용자가 잘린 예제를 진단하고, Obsidian 읽기 보기에서 줄바꿈을 활성화하며, GitHub에서 어떤 동작이 이어지는지 이해하는 방법을 설명합니다.

코드 줄의 줄바꿈 여부는 무엇으로 결정되나요?

펜스 코드 블록은 코드를 리터럴 콘텐츠로 보존합니다. CommonMark는 여는 펜스와 닫는 펜스, 콘텐츠 파싱 방식을 정의하지만 긴 줄을 줄바꿈하는 이식 가능한 스위치는 제공하지 않습니다. 현재 사양은 버전 0.31.2입니다. CommonMark 사양, 펜스 코드 블록.

GitHub Flavored Markdown도 기본적으로 같은 펜스 블록 규칙을 따릅니다. 이 사양 역시 펜스의 정보 문자열에 줄바꿈 지시를 넣도록 규정하지 않습니다. 따라서 언어 이름 뒤에 wrap을 추가해도 이식 가능한 줄바꿈 동작이 보장되지는 않습니다. 공개된 GFM 사양은 버전을 0.29-gfm으로 표기합니다. 이 버전 번호를 현재 CommonMark 버전과 혼동하지 마세요. GitHub Flavored Markdown 사양.

이 작업에서는 다음 세 가지 결과를 구분하세요.

결과 독자에게 보이는 방식 예제의 소스를 변경해야 하나요?
화면상 줄바꿈 소스의 한 줄이 화면에서 여러 줄로 표시됨 아니요
가로 스크롤 줄이 보이는 영역을 벗어나지만 스크롤해 볼 수 있음 아니요
수동 줄바꿈 예제에 소스 줄이 추가됨 예

창 안에 긴 줄 전체를 표시하고 싶다면 줄바꿈을, 시각적 정렬을 유지하는 것이 중요하다면 스크롤을 선택하는 것이 실용적입니다. 수동 줄바꿈을 사용한다면 예제가 여전히 같은 의미인지 별도로 확인해야 합니다.

CSS에서는 소스와 표시 방식의 차이가 명확합니다. 공백 처리 방식은 렌더링에 영향을 주지만 문서의 기반 데이터는 바꾸지 않습니다. 따라서 예제를 한 줄로 복사할 수 있게 유지해야 한다면 화면상 줄바꿈부터 시도해 볼 수 있습니다. CSS 텍스트 모듈 레벨 3.

예제가 누락된 것인지, 단지 화면 밖에 있는 것인지 먼저 확인하세요

긴 명령어나 표현식을 편집하기 전에 소스를 살펴보세요. Obsidian에서 편집 모드 제어를 사용해 소스 모드를 선택합니다. Mac에서 렌더링된 결과와 비교하려면 Cmd+E를 눌러 편집 화면과 읽기 보기를 전환하세요. Obsidian은 이 보기들과 라이브 프리뷰를 구분하며, 라이브 프리뷰는 편집 모드입니다. 보기 및 편집 모드.

별도의 노트에서 다음 테스트용 예제를 사용하세요. 여는 줄과 닫는 세 개의 백틱을 포함해 내부 Markdown을 복사합니다. 콘텐츠는 일부러 일반 텍스트로 작성했으며, 실행할 명령이 아닙니다.

```text
BEGIN sample=amber notebook=desktop layout=wide description=This synthetic example contains a deliberately long line so you can check whether the final marker remains visible when the note pane becomes narrow END
```

노트 창의 너비를 줄이고 END가 보이는지 확인하세요. 이어지는 줄에 표시되면 줄바꿈이 작동하는 것입니다. 블록 안에서 가로로 이동해 해당 텍스트를 찾을 수 있다면 스크롤로 콘텐츠에 접근할 수 있습니다. 그래도 찾을 수 없다면 텍스트가 삭제되었다고 판단하기 전에 렌더링된 블록과 소스를 비교하세요.

이 테스트는 서로 다른 해결 방법이 필요한 두 문제를 구분합니다. 소스 콘텐츠가 없다면 예제를 복원해야 하고, 콘텐츠는 있지만 접근할 수 없다면 표시 방식을 조정해야 합니다. 설정을 시도하는 동안 테스트 자체는 그대로 유지하세요. 그래야 개선된 원인을 변경한 설정으로 판단할 수 있습니다.

펜스도 확인하세요. 닫는 펜스는 여는 펜스와 같은 문자를 사용해야 하며, 문자 수는 여는 펜스와 같거나 많아야 합니다. 예제 안에 일치하는 펜스가 있으면 블록이 일찍 닫힐 수 있습니다. CommonMark 사양, 펜스 코드 블록. Markdown 구문을 설명할 때는 위처럼 바깥쪽 펜스를 백틱 네 개로 지정해 내부의 백틱 세 개 블록을 표시할 수 있습니다. 코드 블록 만들기 및 강조 표시.

CSS를 추가하기 전에 Obsidian 노트의 표시 공간을 넓히세요

설정 → 편집기를 열고 읽기 쉬운 줄 길이를 찾으세요. Obsidian 설명에 따르면 이 설정은 최대 줄 길이를 제한합니다. 잠시 끈 다음 같은 창 크기에서 동일한 테스트 노트를 비교하세요. 이는 너비 조정 기능이며, 문서에는 코드 블록 줄바꿈 스위치로 설명되어 있지 않습니다. 설정.

이제 예제 전체가 보인다면 데스크톱 레이아웃에는 너비 조정만으로 충분할 수 있습니다. 이 설정을 그대로 사용할지 결정하기 전에 창을 더 좁혀 테스트하세요. 한 가지 창 배치에서 공간이 늘어나는 것만으로는 다른 배치에서도 줄을 읽을 수 있는지 알 수 없습니다.

코드가 넘치는 문제를 해결하려고 엄격한 줄바꿈을 변경하지 마세요. Obsidian은 이 설정을 Markdown 줄바꿈과 관련해 설명하지만, 펜스 코드는 리터럴 콘텐츠로 처리됩니다. 이는 다른 서식 문제를 다루는 설정입니다. 설정, CommonMark 사양, 펜스 코드 블록.

Obsidian 읽기 보기에서 긴 코드 줄을 줄바꿈하세요

특정 노트에 적용하려면 Obsidian에서 문서화한 CSS 스니펫 방식과 cssclasses 속성을 사용하세요. 다음은 해당 방식과 표준 CSS 동작을 바탕으로 만든 사용자 지정 설정입니다. 읽기 보기의 일반 렌더링 펜스 블록을 대상으로 하며, Obsidian이 제공하는 줄바꿈 프리셋이나 편집기 모드 설정은 아닙니다. CSS 스니펫.

스니펫을 만들고 활성화하기

  1. 설정 → 모양 → CSS 스니펫을 엽니다.
  2. 스니펫 폴더 열기를 선택합니다.
  3. 일반 텍스트 편집기에서 해당 폴더에 wrap-code.css 파일을 만들고 아래 CSS를 저장합니다.
  4. CSS 스니펫으로 돌아와 스니펫 다시 불러오기를 선택한 다음 wrap-code를 활성화합니다.

Obsidian이 문서화한 데스크톱 설치 단계입니다. 활성화하면 저장된 스니펫 변경 사항은 보통 자동으로 적용됩니다. CSS 스니펫.

.wrap-code pre,
.wrap-code pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

테스트 노트의 맨 앞에 이 속성 블록을 추가하세요. 이미 속성이 있다면 두 번째 속성 블록을 넣지 말고 기존 cssclasses 값에 wrap-code을 추가하세요.

---
cssclasses:
  - wrap-code
---

Obsidian은 cssclasses를 특정 노트에 사용자 지정 CSS를 적용하는 방법으로 설명합니다. 여기서 .wrap-code는 규칙을 해당 노트로 제한하고, 나머지 선택자는 렌더링된 미리 서식 지정 블록과 그 안의 코드 콘텐츠를 대상으로 합니다. 이 규칙은 편집 화면을 설정하지 않습니다. CSS 스니펫.

CSS가 바꾸는 부분 이해하기

white-space: pre-wrap 선언은 공백과 소스 줄바꿈을 보존하면서 화면상 줄바꿈을 허용합니다. overflow-wrap: anywhere 선언은 줄바꿈할 수 없는 문자열도 필요할 때 하이픈을 삽입하지 않고 줄바꿈할 수 있게 합니다. 두 선언을 함께 사용하면 공백이 있는 긴 줄과 끊김 없이 이어진 긴 토큰을 모두 처리할 수 있습니다. CSS 텍스트 모듈 레벨 3, overflow-wrap CSS 속성.

white-space: normal로 대체하지 마세요. 이 값은 공백을 합쳐서 보존하려던 들여쓰기의 표시를 바꿀 수 있습니다. 또한 overflow-wrap만으로는 줄바꿈을 금지하는 공백 규칙을 무효화할 수 없습니다. white-space CSS 속성, CSS 텍스트 모듈 레벨 3.

읽기 보기로 돌아가 창을 좁힌 다음 END가 보이는지 다시 확인하세요. 그런 다음 테스트 콘텐츠를 일반 텍스트 편집기에 복사해 원본과 비교하세요. 기대하는 결과는 동일한 소스 한 줄이 여러 표시 줄로 나타나는 것입니다. 복사 확인을 통해 설치된 렌더러와 테마에서 실제로 어떻게 동작하는지 검증할 수 있습니다.

렌더러별 차이를 고려하세요

Obsidian의 모양 사용자 지정은 펜스 블록의 이식 가능한 Markdown 구문의 일부가 되지 않습니다. 예제를 다른 곳으로 옮길 때는 대상 환경에서 별도로 테스트하세요. 다음 비교를 통해 무엇을 확인해야 할지 판단할 수 있습니다.

대상 기준으로 삼을 항목 별도로 확인할 항목
CommonMark 구현 문서화된 펜스 블록 파싱 줄바꿈, 스크롤, 사용 가능한 표시 너비
GitHub에서 렌더링된 Markdown GitHub의 문서화된 펜스 및 언어 식별자 대상 환경의 실제 코드 블록 표시 방식
Obsidian 읽기 보기 렌더링된 노트와 활성화된 로컬 스타일 현재 테마에서 스니펫이 작동하는지 여부
Obsidian 라이브 프리뷰 또는 소스 모드 선택한 편집 모드 편집기 표시 방식. 위 스니펫은 이를 설정하지 않음

구문에 대한 경계는 CommonMark 사양, GitHub의 코드 블록 문서, Obsidian의 보기 문서를 따릅니다.

GitHub 문서에서는 여는 펜스 뒤의 언어 식별자가 구문 강조 표시를 활성화한다고 설명합니다. 따라서 text을 다른 언어 식별자로 바꿔도 줄바꿈을 요청하는 문서화된 방법이 되지 않습니다. 예제에 맞는 식별자를 유지하고 표시 동작은 이를 담당하는 렌더러에서 처리하세요. 코드 블록 만들기 및 강조 표시.

대상의 표시 방식을 제어할 수 없다면, 완전한 한 줄을 그대로 두고 대상에서 제공하는 탐색 기능을 사용하거나 예제를 유효한 여러 소스 줄로 다시 작성하는 방법 중에서 선택하세요. 다시 작성할 때는 예제의 언어나 형식을 따라야 합니다. Markdown 펜스는 임의로 삽입한 줄바꿈을 유효하게 만들어 주지 않습니다.

필요한 콘텐츠를 없애지 않고 문제 해결하기

Obsidian 규칙이 작동하지 않는 것 같으면 다음 순서대로 확인하세요.

  1. 읽기 보기에서 테스트하고 있는지 확인합니다.
  2. wrap-code.css가 CSS 스니펫에 표시되고 활성화되어 있는지 확인합니다.
  3. 노트의 cssclasses에 정확히 wrap-code이 포함되어 있는지 확인합니다.
  4. 변경하지 않은 테스트 노트를 보면서 스니펫을 껐다가 다시 켭니다.
  5. 필요하면 다른 스니펫을 잠시 비활성화하고 Obsidian 기본 테마와 비교해 스타일 충돌을 분리합니다.
  6. 작업을 마치기 전에 실제 예제로 테스트를 반복합니다.

선택자 규칙은 설치 환경에서 확인해야 하는 사용자 지정 설정으로 취급하세요. 테마나 특수 블록 렌더러는 다른 스타일이나 구조를 사용할 수 있습니다. 일반 펜스 테스트는 작동하지만 실제 블록이 작동하지 않는다면, 그 차이는 유용한 단서입니다. 무작정 줄바꿈을 추가하기보다 실제 블록의 렌더러를 살펴보세요.

마지막으로 끝 문자가 보이는지, 들여쓰기가 이해하기 쉬운지, 복사한 텍스트가 의도한 소스와 일치하는지, 예제를 읽을 보기에서 제대로 작동하는지 확인하세요. 소스 전체를 보존하고 줄바꿈이나 스크롤을 의도적으로 선택한 다음, 중요한 대상 환경마다 테스트하세요.

출처