예를 들어, 이것은 Swift 코드입니다
func jjj () {
let jj: String = "1"
}
다음과 같이 색상이 적용되기를 원합니다.
언어에 따라 색상이 추가됩니다. 하이라이트된 언어에 Swift가 포함되어 있는지 확인하고, 여전히 감지가 작동하지 않으면 코드 블록의 언어를 수동으로 설정할 수도 있습니다.
감지되는 언어는 사이트 설정인 highlighted languages를 통해 지정됩니다.
Swift는 기본적으로 목록에 포함되지만, 메타 사이트에는 포함되지 않습니다.
이 서드파티 라이브러리가 지원하는 언어 목록은 다음 링크에서 확인할 수 있습니다:
수정: 여기에서 설명된 바와 같습니다 
@PrettyGirl, 마크다운 팁: 코드 블록에서 백틱을 이스케이프하려면 백틱을 세 개가 아니라 네 개로 감싸면 됩니다 
``` swift
[코드 입력]
```
안녕하세요 
이 테마 컴포넌트로 색상을 변경해 볼 수도 있어요 
팁과 링크 감사합니다. 그런데 사이트 설정의 highlighted languages에 swift가 포함되어 있습니다. 하이라이팅은 되지만, 현재 사용되는 색상을 마음에 들지 않습니다. 다른 방법이 있을까요? discourse 폴더 안의 highlight.js를 직접 수정하는 것 같은 방법이요? 방법이 있을 것 같은데, highlight.js가 오픈소스인 것도 확인했습니다.
Discourse는 기본적으로 highlight.js를 함께 제공하나요?
아, 죄송합니다. 제목을 잘못 읽었네요. 
네
마지막 메시지 뒤에 붙여진 테마 컴포넌트를 시도해 보셨나요?
그렇지 않았습니다. 다른 테마를 적용하면 전체 discourse 앱에서 어떤 다른 영역이 어떻게 달라질지 모르기 때문입니다. 현재 모습과 설정은 마음에 듭니다. 다만 여기저기 몇 가지 문제가 있을 뿐이죠. 예쁜 코드 블록을 제공한다고 해서 다른 외관이나 설정 등이 바뀌는 건 가치가 없습니다. 그 특정 문제만 해결되면 됩니다.
위 게시물에서 언급했듯이, 코드 언어를 개별적으로 지정하고 자동 언어 감지를 덮어쓸 수 있습니다.
Swift를 지정하려면 .language-swift 클래스를 사용할 수 있습니다. 더 구체적으로 말하면 code.hljs.language-swift입니다. 그리고 CSS에서 Swift의 색상을 변경할 수 있습니다.
확인해 본 결과, 이는 Xcode 테마와 유사해 보입니다. 하지만 스크린샷의 코드 색상과 더 잘 어울리도록 이 두 색상을 변경할 것입니다.
이 색상들의 문제는 다크 모드에서 가독성이 떨어진다라는 점입니다. 이것이 바로 highlight.js 데모 페이지에 흰색 배경이 사용된 이유이며, Discourse가 언어별로 기본 범용 색상 조합을 사용하는 이유라고 생각합니다. 기억이 정확하다면, 과거에 다크 모드에서 가독성이 어렵다는 보고가 있었던 것 같습니다…
Swift에만 적용하려면 새로운 테마 컴포넌트를 생성하거나 기존 컴포넌트에 추가해야 합니다. 참고: 이 색상들은 다크 모드에서도(흰색 배경 등) 사용되므로, 다크 모드에서 다른 색상을 사용하려면 dark-light-choose()를 사용하여 새로운 색상 정의를 만들어야 합니다.
Common / CSS
code.hljs.language-swift {
background: #fff;
color: #000;
.xml .hljs-meta {
color: silver;
}
.hljs-comment,
.hljs-quote {
color: #007400;
}
.hljs-attribute,
.hljs-keyword,
.hljs-literal,
.hljs-name,
.hljs-selector-tag,
.hljs-tag {
color: #aa0d91;
}
.hljs-template-variable,
.hljs-variable {
color: #3f6e74;
}
.hljs-code,
.hljs-meta .hljs-string,
.hljs-string {
color: #c41a16;
}
.hljs-link,
.hljs-regexp {
color: #0e0eff;
}
.hljs-bullet,
.hljs-number,
.hljs-symbol,
.hljs-title {
color: #2b75a6;
}
.hljs-meta,
.hljs-section {
color: #643820;
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-params,
.hljs-title.class_,
.hljs-type {
color: #442fa1;
}
.hljs-attr {
color: #836c28;
}
.hljs-subst {
color: #000;
}
.hljs-formula {
background-color: #eee;
font-style: italic;
}
.hljs-addition {
background-color: #baeeba;
}
.hljs-deletion {
background-color: #ffc8bd;
}
.hljs-selector-class,
.hljs-selector-id {
color: #9b703f;
}
.hljs-doctag,
.hljs-strong {
font-weight: 700;
}
.hljs-emphasis {
font-style: italic;
}
}
변경 전
변경 후
이미 사용 중인 #customization:theme에 #customization:theme-component가 추가됩니다. 따라서 전체적인 외관을 변경하는 것이 아니라, 특정 부분만 추가하거나 변경합니다. 즉, 커스텀 코드 컴포넌트는 코드 블록의 외관만 변경합니다.
설명은 코드 블록만 변경된다고 되어 있으며, 이는 정확히 당신이 하고 싶은 일입니다.
다른 사람들이 제안한 테마 작동 방식에 대한 링크들을 읽어보시기 바랍니다.
정말 놀랍네요, 정말 감사합니다. 잘 작동합니다