위 게시물에서 언급했듯이, 코드 언어를 개별적으로 지정하고 자동 언어 감지를 덮어쓸 수 있습니다.
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;
}
}
변경 전
변경 후
