구문 강조에 사용할 수 있는 프로그래밍 언어 설정

:bookmark: 이 가이드는 Discourse에서 구문 강조(Syntax Highlighting)에 사용할 수 있는 프로그래밍 언어를 구성하는 방법을 설명합니다.

:person_raising_hand: 필요한 사용자 권한: 관리자

구문 강조는 프로그래밍 언어에 기반한 포맷팅을 적용하여 코드 블록의 가독성을 높여줍니다. Discourse에서 구문 강조에 사용할 수 있는 언어를 사용자 지정할 수 있습니다.

highlighted_languages 사이트 설정 구성

구문 강조에 사용할 프로그래밍 언어 목록을 구성하려면:

  1. 관리자 패널로 이동합니다.
  2. ConfigContentPosts and Topics로 이동합니다.
  3. highlighted_languages 사이트 설정을 찾습니다.

이 설정에서 구문 강조에 사용할 수 있는 언어를 정의할 수 있습니다. 지원하려는 언어 이름을 쉼표로 구분하여 입력하세요.

관련 설정

구문 강조와 관련된 추가 사이트 설정 두 가지가 같은 영역에 있습니다:

  • default_code_lang — 언어가 지정되지 않은 경우 코드 블록에 적용되는 기본 언어입니다. 기본값은 auto이며, 이는 언어를 자동으로 감시하려고 합니다.
  • autohighlight_all_code — 활성화되면 언어 클래스가 지정되지 않은 경우를 포함하여 모든 <code> 블록에 구문 강조가 적용됩니다. 기본값은 꺼져 있습니다.

추가 언어 지원 추가

원하는 언어가 highlight.js에 번들링되어 있지 않다면, api.registerHighlightJSLanguage() 플러그인 API를 사용하여 테마 컴포넌트를 통해 추가할 수 있습니다. 이를 위한 단계는 다음과 같습니다:

  1. 언어 모듈 찾기: 추가하려는 언어를 지원하는 highlight.js 언어 정의를 찾습니다. 예를 들어:
  • Solidity: https://github.com/highlightjs/highlightjs-solidity
  • Supercollider: https://github.com/highlightjs/highlightjs-supercollider
  1. 테마 컴포넌트를 사용하여 모듈 통합:
  • 원하는 언어의 HighlightJS 언어 정의를 가져옵니다.
  • Discourse에서 새로운 테마 컴포넌트를 생성합니다.
  • 테마 컴포넌트의 JavaScript에서 플러그인 API를 사용하여 언어를 등록합니다:
    api.registerHighlightJSLanguage("languageName", languageDefinitionFunction);
    
  • 완전한 예제는 테마 컴포넌트를 통한 Highlight.JS 신규 언어 설치를 참조하세요.
7개의 좋아요

I want to add solidity, a language that is not bundled with highlight.js. It is provided in this package: GitHub - highlightjs/highlightjs-solidity · GitHub

I’m not sure how to do this. I’ve added it to the discourse settings. Is it going to find the package for me and take care of everything, or do I have to put this extra javascript package somewhere? I’ll appreciate some guidance :slight_smile:

1개의 좋아요

I’m also interested in this, to support syntax highlighting of the supercollider language via GitHub - highlightjs/highlightjs-supercollider · GitHub

1개의 좋아요

Bump. If we want to add syntax highlighting support for languages not already in highlight.js, is there any way to add this directly eg via a theme component, or do we need to get the upstream highlight.js people to accept a PR with the additional syntax?

I’m asking as there is an fairly esoteric pair of languages Archetype Description Language (ADL) and Archetype Query Language (AQL) which the owners of discourse.openehr.org would like to be syntax highlight-able. They have technical capability to build a parser/highlighter, they just need to know how to make it work in a Discourse.

3개의 좋아요

테마 컴포넌트로 구현하는 건 전혀 문제없어요! HighlightJS 스크립트를 준비했다면 여기에 알려주세요. Customization > Theme component 구성을 도와드릴게요.

3개의 좋아요

Thanks @Falco ! I will get the script built and will post back when ready.

3개의 좋아요

In the last week or two, I’ve noticed that the code highlighting doesn’t seem to be registering when it should. See here for an example. When I specify a language (java in the case above), it will apply the colors.

Here is another example for XML:
https://developer.sailpoint.com/discuss/t/get-application-roles-as-well-as-search-for-the-roles/78194?u=derek_putnam

We have dozens of languages to be detected. I see the subtext under this setting says that too many can cause it to perform poorly, but I don’t think we added anything recently.