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

: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개의 좋아요

solidity라는 언어를 추가하고 싶은데, 이 언어는 highlight.js에 기본으로 포함되지 않습니다. 해당 패키지는 다음 링크에서 제공됩니다: GitHub - highlightjs/highlightjs-solidity · GitHub

정확한 방법을 잘 모르겠습니다. discourse 설정에 추가해 두었는데, 자동으로 해당 패키지를 찾아서 모든 작업을 처리해 주나요? 아니면 이 추가적인 JavaScript 패키지를 어딘가에 직접 올려야 하나요? 조언을 주시면 감사하겠습니다 :slight_smile:

1개의 좋아요

저도 이 기능에 관심이 있습니다. https://github.com/highlightjs/highlightjs-supercollider를 통해 SuperCollider 언어의 구문 강조를 지원할 수 있거든요.

1개의 좋아요

부ump. highlight.js에 이미 포함되어 있지 않은 언어에 대해 구문 강조(syntax highlighting) 지원을 추가하려면, 테마 컴포넌트를 통해 직접 추가할 방법이 있는지, 아니면 추가 구문을 포함한 PR을 highlight.js 상류(upstream)에 제출하여 수용을 받아야 하는지 궁금합니다.

질문하는 이유는, 다소 희귀한 언어 쌍인 Archetype Description Language(ADL)와 Archetype Query Language(AQL)에 대해 discourse.openeehr.org 소유자들이 구문 강조가 가능하길 원하고 있기 때문입니다. 그들은 파서/하이라이터를 구축할 기술적 역량은 갖추고 있지만, Discourse에서 이를 작동시키는 방법을 알아야 합니다.

3개의 좋아요

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

3개의 좋아요

감사합니다 @Falco ! 스크립트를 작성해서 준비되면 다시 알려드릴게요.

3개의 좋아요

최근 1~2주 동안, 코드 하이라이팅이 적용되어야 할 때 제대로 반영되지 않는 것을 확인했습니다. 예를 여기를 참조하세요. 언어를 지정할 때(위 예에서는 java)는 색상이 적용됩니다.

XML에 대한 또 다른 예시는 다음과 같습니다:
https://developer.sailpoint.com/discuss/t/get-application-roles-as-well-as-search-for-the-roles/78194?u=derek_putnam

감지해야 할 언어가 수십 개나 됩니다. 해당 설정 아래에 너무 많은 언어를 지정하면 성능이 저하될 수 있다는 설명이 있지만, 최근에는 아무것도 추가하지 않았습니다.