alex10
8월 12, 2024, 6:09오후
1
Discourse에서 코드 블록 형식 문제로 인해 오류가 발생하고 있습니다. Python 코드를 게시할 때, URL과 경로와 같은 코드의 일부가 아래 스크린샷에 표시된 것처럼 빨간색으로 하이라이트되거나 의도치 않게 서식이 적용됩니다:
문제 설명
삼중 백틱(````)을 사용하여 Python 코드 블록을 게시할 때, 텍스트의 특정 부분(URL이나 경로 내의 언더스코어 등)이 빨간색으로 하이라이트되거나 잘못된 서식이 적용됩니다.
문자를 이스케이프 처리하고, HTML 엔티티를 사용하며, 언어를 지정하지 않아 구문 강조를 제거하는 방법을 시도해 보았지만 문제가 지속됩니다.
코드 예시
아래는 문제를 일으키는 코드의 일부입니다 (Python):
import degirum as dghttps://cs.degirum.com ”, “”)https://docs.degirum.com/images/samples/TwoCats.jpg ”)
시도한 방법
백슬래시로 언더스코어를 이스케이프 처리했습니다.
HTML 엔티티를 사용하여 언더스코어를 대체했습니다.
코드 블록에서 python을 지정하지 않아 구문 강조를 제거했습니다.
어떤 서식도 없이 코드를 일반 텍스트로 게시했습니다.
설정 정보
설정에서 하이라이트가 적용되는 언어는 다음과 같습니다:
bash, c, cpp, csharp, css, diff, go, graphql, ini, java, javascript, json, kotlin, lua, makefile, markdown, objectivec, perl, php, php-template, plaintext, python, python-repl, r, ruby, rust, scss, shell, sql, swift, typescript, xml, yaml, wasm
지원 요청
다른 분들도 이 문제를 겪어 보셨나요?
Discourse가 코드 일부를 오해하지 않도록 하는 권장 방법이 있나요?
코드 블록 렌더링에 영향을 미칠 수 있는 설정이나 구성이 있나요?
bryce
8월 12, 2024, 7:02오후
2
구문 하이라이트 시스템/설정에 대해 잘 알고 있지는 않지만, 빨간색 텍스트를 제거하고 싶다면 사이트 테마에 다음 CSS를 사용할 수 있습니다:
code.language-python span {
color: inherit;
}
빨간색은 문자열을 나타내기 위해 사용되므로, 이를 다른 색상으로 변경하려면 다음과 같이 하면 됩니다:
code.language-python span.hljs-string {
color: #FFF; /* 원하는 색상으로 교체하세요 */
}
빨간색 텍스트를 제외하고, 올바르게 표시되지 않는 다른 부분이 있었나요?
alex10
8월 12, 2024, 7:11오후
3
제안해 주셔서 감사합니다, @bryce ! 사이트 테마의 CSS를 조정하여 빨간색 텍스트 문제를 해결해 보겠습니다.
사이트 테마의 CSS를 조정하여 빨간색 텍스트 문제를 해결해 보겠습니다.
주된 문제는 제가 올린 원래 스크린샷의 글꼴이 코드처럼 보이도록 서식이 지정되어 있지 않다는 것입니다. 일반적으로 코드 블록에 사용되는 등폭(monospaced) 글꼴 스타일이 빠져 있습니다. 이상적으로는 적절한 글꼴과 글꼴 색상을 사용하여 코드가 다음과 같이 표시되기를 희망했습니다:
이 예시와 유사한 등폭 글꼴로 코드가 표시되도록 보장하는 방법이 있을까요?
이것을 제외하고는 다른 주요 서식 문제를 발견하지 못했지만, 계속 테스트해 보고 다른 문제가 발생하면 알려 드리겠습니다.
도움 주셔서 다시 한번 감사합니다!
bryce
8월 12, 2024, 7:35오후
4
강조 표시 색상은 다음 CSS 변수를 오버라이드하여 변경할 수 있습니다:
--hljs-comment: 코드 주석에 사용됩니다--hljs-number: 코드 내 숫자 값에 사용됩니다--hljs-string: 코드 내 문자열 값에 사용됩니다--hljs-literal: 코드 내 리터럴 값에 사용됩니다--hljs-tag: HTML/XML 태그에 사용됩니다--hljs-attribute: HTML/XML 태그 속성에 사용됩니다--hljs-symbol: 코드 내 심볼에 사용됩니다--hljs-bg: 코드 블록의 배경색에 사용됩니다--hljs-builtin-name: 내장 함수 이름에 사용됩니다
예를 들어 문자열 색상을 오버라이드하려면:
:root {
--hljs-string: pink;
}
사용 중인 하이라이팅 라이브러리인 hljs는 예제에서와 같이 degirum과 같은 Python 식별자를 하이라이트하는 것을 지원하지 않을 수 있지만, 다른 색상들을 변경하면 꽤 근사한 결과를 얻을 수 있을 것입니다.
글꼴에 대해서는, 이는 이상합니다. 기본적으로 코드 블록은 등폭(monospace) 글꼴로 표시되어야 합니다. 해당 테마에서 아무것도 오버라이드되지 않았는지 두 번 확인해 보시길 권장합니다.
alex10
8월 12, 2024, 7:40오후
5
정리하자면, 현재 기본 테마를 사용하고 있으며 추가적인 컴포넌트는 사용하지 않고 있습니다. 따라서 코드 블록에 모노스페이스 글꼴이 기본적으로 적용되지 않는다는 점이 이상합니다. 다른 설정이 이를 덮어쓰고 있는 것으로 보이지도 않습니다.
참고로, 저는 macOS 14.6.1에서 Chrome 버전 127.0.6533.100을 사용하고 있습니다.
Moin
8월 12, 2024, 7:57오후
6
try.discourse.org에서 문제를 재현할 수 있나요?
시해 보았지만 링크가 하이라이트되지 않았습니다.
alex10
8월 12, 2024, 8:29오후
7
try.discourse.org에서 코드를 테스트했으며, 결과는 아래 스크린샷에 표시되어 있습니다:
폰트는 올바르게 표시되고 링크도 예상대로 강조되어 있습니다. 하지만 저희 커뮤니티에서는 여전히 폰트가 올바르게 표시되지 않고, 링크가 마땅히 되어야 할 대로 강조되지 않는 문제가 발생하고 있습니다.
이러한 불일치가 발생하는 이유가 무엇인지 확신이 서지 않습니다.
참고로, 여기 는 저희 커뮤니티의 해당 페이지 링크입니다.
Jagster
8월 12, 2024, 8:40오후
8
안전 모드 자체는 괜찮은 것 같습니다. 글꼴 면에서는 말이죠.
그러니까 문제는 거기서 플러그인, 테마 또는 컴포넌트 중 하나인 것 같습니다.
Moin
8월 12, 2024, 8:42오후
9
이것은 자바 하이라이팅입니다.
그리고 여러분의 포럼에서는 메이크파일입니다.
Selecting the programming language used in code blocks 에 코드 블록에 사용할 프로그래밍 언어를 선택하는 방법에 대한 가이드가 있습니다.
여러분의 포럼에서 찍은 스크린샷은 안전 모드 없이 촬영되었기 때문에, 제 경우 글꼴은 모노스페이스입니다.
alex10
8월 12, 2024, 8:52오후
10
이 문제를 도와주셔서 두 분 모두 감사합니다. 폰트가 다른 사람들에게는 모노스페이스로 정상 표시된다는 것을 확인해 기쁩니다.
제 환경에서는 올바르게 표시되지 않으므로, 제 설정이나 환경에 특정한 문제일 가능성이 있습니다. 크롬과 사파리(둘 다 최신 버전)에서 모두 제 화면에는 잘못 표시되고 있으며, 제 조직 내 PC를 사용하는 다른 사용자들에게도 잘못 표시됩니다.
alex10
8월 12, 2024, 8:59오후
11
방금 개인 컴퓨터에서 확인해 봤는데, 그쪽에서도 문제가 계속되고 있습니다. 코드 폰트가 여전히 모노스페이스로 표시되지 않고, 링크도 올바르게 하이라이트되지 않습니다.
이 문제는 여러 기기에서 일관되게 나타나므로, 제 주요 환경의 문제인 것은 아닌 것 같습니다.
Moin
8월 12, 2024, 9:05오후
12
alex10
8월 12, 2024, 9:07오후
13
방금 안전 모드에서 확인해 봤는데, 그 모드에서는 문제가 해결된 것 같습니다. 코드 폰트가 모노스페이스로 표시되고 링크도 올바르게 하이라이트됩니다.
기본 테마를 사용하고 있으며 추가적인 컴포넌트도 없는데, 왜 일반 모드에서는 문제가 발생하는지 이해가 되지 않습니다.
pfaffman
8월 12, 2024, 9:18오후
15
그렇게 기대했습니다. 문자열이 다른 색상으로 표시되므로 문자열임을 바로 알 수 있습니다. 텍스트 에디터에서도 이렇게 보이나요?
SiteSetting.default_code_lang을 "text"나 ""으로 변경하면 될 것 같습니다. highlighted_languages 설정도 있습니다. 여기서 기본 코드 언어를 text와 같은 것으로 변경한 것 같습니다.
이것은 이렇게 보입니다:
result=model("https://big.bang")
그리고 ```python으로 강제하면 이렇게 보입니다
result=model("https://big.bang")
alex10
8월 12, 2024, 9:28오후
16
기본 코드 언어가 auto로 설정되어 있었습니다. text로 변경해 보았지만 제 환경에서는 아무것도 바뀌지 않았습니다.
다음은 강조된 언어 목록입니다:
Moin
8월 12, 2024, 9:31오후
18
확인해 보니 자동 감지가 파이썬이 아니라 makefile로 인식했습니다.
게시글에서 코드 블록에 프로그래밍 언어를 지정 하셨나요?
alex10
8월 12, 2024, 9:32오후
19
코드 블록에 python을 추가했을 때의 모습입니다:
저는 커뮤니티를 관리하고 있으므로, 최종 사용자가 보는 것과 동일한 방식으로 이를 확인하는 것이 목표입니다. 오른쪽에 보시는 것처럼, 모양이 맞지 않습니다.
