예시: * 1932.
다음은 놀랍게도 작동합니다: * 1917-32.
- 1917-32.
플러그인 없이 최신 버전인 3.3.0.beta3-dev를 사용하고 있습니다.
2개의 좋아요
-
- 테스트
-
- 두 번째 줄 테스트
사용된 마크업
* 1932. test smth
* 1933. again now then
네, 문제가 무엇인지 알 수 있지만 이는 유효한 마크다운 마크업으로 보이지 않습니다. 다른 마크다운 편집기로 위 내용을 테스트해 보았지만 비슷한 문제를 발견했습니다:
숫자 뒤의 마침표를 생략하면 이를 피할 수 있습니다. 예를 들어:
- 1932 - 테스트
- 1933 - 두 번째 줄 테스트
또는 시작 부분의 *를 제외하는 방법도 있습니다:
- 테스트
- 두 번째 줄 테스트
1932. testing
1933. second-line test
1개의 좋아요
하지만 이는 연속된 연도에만 작동합니다.
- 첫 번째
- 두 번째
- 세 번째
2008. 첫 번째
2014. 두 번째
2015. 세 번째
Markdown 대신 HTML을 사용하는 것도 대안으로 작동할 수 있습니다:
- 1997. 첫 번째
- 2000. 두 번째
- 2015. 세 번째
<ul>
<li> 1997. 첫 번째</li>
<li> 2000. 두 번째</li>
<li> 2015. 세 번째</li>
</ul>
1개의 좋아요
이것도 마크다운의 한계입니다. GitHub와 다른 몇 가지 마크다운 편집기를 테스트해 보았는데, 모두 순차 목록을 기본값으로 사용합니다.
3개의 좋아요
이 마진(margin)을 CSS로 제거하면 정상화됩니다.
li>ul, li>ol, .cooked li>ul, .cooked li>ol, .d-editor-preview li>ul, .d-editor-preview li>ol {
margin: 0; /* Remove this */
}
1개의 좋아요
12983298. one
2. test
- one
- test
예전에 이런 현상을 본 적이 있습니다. CSS에서 특수한 경우를 위해 복잡한 처리를 하다 보니 시각적으로 깨지는 경우가 있거든요.
이유는 악용될 수 있기 때문이라고 생각합니다. 아마 @awesomerobot 님이 기억하실 겁니다.
2개의 좋아요
음, 또 다른 테스트:
- 12983298\. one
- 2\. test
- 12983298. one
- 2. test
* 12983298\. one
* 2\. test
- 12983298. one
- 2. test
명백하게도, 줄의 첫 번째 토큰이 아니더라도 숫자 뒤에 마침표가 오면 숫자 목록으로 인식됩니다.
1개의 좋아요
이는 마크다운에서 숫자 뒤에 .(점)이 오는 경우, 해당 항목이 번호가 매겨진 목록(ordered list)으로 간주되기 때문입니다.
따라서 * 1932.와 같은 형식을 사용하면 다음과 같은 HTML이 생성됩니다:
<ul>
<li>
<ol start="1932">
<li><!-- 항목 내용 --></li>
</ol>
</li>
<li>
<ol start="1933">
<li><!-- 항목 내용 --></li>
</ol>
</li>
</ul>
기술적으로는 유효하지만, 의도하지 않은 이상한 결과입니다.
-(하이픈)을 도입하면 더 이상 연속된 숫자가 아니므로 번호가 매겨진 목록으로 처리되지 않으며, .(점)은 무시됩니다.
이를 피하려면 이상적으로는 다음 중 하나를 사용해야 합니다:
* 1932 (숫자가 연속되지 않는 경우 비번호 목록)
또는
1932. (숫자가 연속되는 경우 번호가 매겨진 목록)
.(점)이 필수적이고 번호가 매겨진 목록이 아니라면, \(역슬래시)로 .(점)을 이스케이프 처리할 수 있습니다:
* 1932\.
이는 별개의 문제이며, 기본 브라우저 CSS에서도 발생합니다:
HTML 목록의 항목 마커는 의사 요소(pseudo element)로, 목록의 패딩/마진(padding/margin)이 고려되기 전에 배치되므로 항상 콘텐츠의 “박스” 바깥에 표시됩니다. 목록에서 마진/패딩을 제거하더라도 마커는 여전히 넘칩니다.
예를 들어, 목록에서 마진/패딩을 제거하고 부모 컨테이너에 overflow: hidden을 적용하면 목록 마커가 전혀 보이지 않습니다:
결국, 목록 왼쪽에 적용되는 패딩은 정적 값이고 목록 마커는 패딩 영역 내에 배치되도록 설계되어 있기 때문에, 어떤 시점에서는 숫자가 넘칩니다.
우리의 CSS는 목록을 기본값보다 가로로 더 컴팩트하게 만듭니다. 또한 왼쪽 마진과 패딩을 모두 가지고 있지만… 결과는 기본적으로와 거의 동일합니다:
마커 위치를 재정의할 수 있는 list-style-position: inside와 같은 일부 CSS가 있습니다. 이는 마커를 콘텐츠 박스 내부로 배치합니다. 하지만 이렇게 하면 더 이상 깔끔한 숫자 정렬을 얻을 수 없습니다:
list-style-position: outside; (기본값):
list-style-position: inside; (목록 마커가 콘텐츠 공간을 차지함)
따라서 어떤 길이의 번호가 매겨진 목록을 올바르게 지원하고 콘텐츠 정렬에 영향을 주지 않으려면, 마커의 숫자 자릿수를 감지하는(목록의 첫 번째 숫자부터 시작하여 모든 목록 항목을 세어 길이를 결정) JS를 사용하고 가장 큰 숫자를 수용할 수 있도록 충분한 패딩을 적용하는 것과 같은 조치를 취해야 합니다.
4개의 좋아요
리포트에 대해 감사드립니다. 도움이 될 것으로 생각되는 우회 방법을 제공했습니다. 현재 모든 경계 사례를 수정하는 것은 불가능하며, 당분간 이 리포트를 닫을 예정입니다.
2개의 좋아요