HTML <code> 태그 내의 색상(구문 강조)

StackOverflow https://stackoverflow.com/questions/1647724

문제

다음과 같은 코드 조각에서 ...

class Foo
{
  internal Foo()
  {
    for (int i = 0; i < 42; ++i);
  }
}

...다양한 키워드 등이 내 브라우저에 표시될 때 색상으로 구분됩니다.

"소스 보기"를 수행하면 HTML에서 이 색상 구분을 구현하는 특별한 내용이 표시되지 않습니다.

그렇다면 이 구문별 색상 강조 표시는 어떻게 및/또는 어디에 구현됩니까?예를 들어 브라우저에 내장되어 있습니까? 아니면 브라우저 내에서 DOM을 편집하는 사이트별 JavaScript로 구현됩니까?

나는 이것이 Google에 어려운 질문이라고 생각합니다.

도움이 되었습니까?

해결책

stackoverflow가 사용됩니다 Google의 prettify 구문 강조 표시를위한 JS 라이브러리. 서버에서 HTML을 전달한 후 클라이언트 측에서 실행됩니다. 그렇기 때문에 RAW HTML 소스에서는 볼 수 없습니다. 다음과 같은 브라우저 플러그인이있는 경우 개똥 벌레, Prettify가 마법을 한 후 DOM을 검사 할 수 있습니다.

다른 팁

JavaScript 라이브러리입니다. 거기에 꽤 인기있는 존재가 있습니다. 구문. 내가 가장 좋아하는 것은 칠리, 그렇지만.

훌륭한 FAQ가 있습니다. 구문 강조란 무엇이며 어떻게 작동합니까? Meta.SE에 대해 알아보세요.

귀하의 편의를 위해 여기에 전체 내용을 인용하고 있지만 지원되는 언어 목록에 대한 업데이트는 원본 게시물을 확인하는 것이 좋습니다.

구문 강조란 무엇입니까?

구문 강조를 사용하면 작성된 언어에 따라 게시물의 코드를 강조 표시하여 읽기 쉽게 할 수 있습니다.

어떻게 작동하나요?

Stack Exchange에는 자체 구문 강조 엔진이 없습니다. 그것은 사용한다 Google 코드 프리티파이.따라서 구문 강조와 관련된 모든 버그 및 기능 요청은 Stack Exchange에서 처리할 수 없으며 Google Code Prettify 팀에 전달해야 합니다.

게시물을 작성하거나 편집할 때 5초 동안 입력을 멈추는 즉시 구문 강조가 미리보기에 할당됩니다.

예쁘게 다음 목록을 지원합니다. 핵심 언어 (C/C++, C#, Java, JavaScript/CoffeScript, Perl, Python, Ruby, Regex, Bash, HTML, XML 포함)을 강조 표시할 수 있습니다. 기본 대부분의 C 유사 언어 및 HTML 유사 마크업 언어에서 정상적으로 작동하는 일반 형광펜입니다.추가 언어는 다음과 같이 구현됩니다. 확장 (각 lang-*.js 파일).

내 코드가 올바르게 강조표시되지 않는 이유는 무엇입니까?

게시물에 올바른 강조 표시가 없으면 지원되지 않을 수 있습니다.다음을 살펴보십시오. Prettify 지원 언어 목록.해당 언어가 목록에 없으면 Stack Exchange에서 배포하기 전에 Prettify 프로젝트 내에서 언어를 생성해야 합니다.

태그에 적용할 수 있는 언어가 이미 목록에 있지만 Stack Exchange에서 사용되지 않는 경우 여기 Meta에서 기능 요청을 제출하여 네트워크에 배포하도록 하세요.

버그를 보고하거나 새 언어를 요청하려면 어떻게 해야 하나요?

실제로 구문 강조 표시 자체의 버그인 경우 다음을 확인하세요. 문제 목록 이미 보고되었는지 확인합니다.그렇지 않은 경우 언제든지 신고하거나 프로젝트에 참여하다 직접 수정사항을 제출하세요.제기한 문제를 신속하게 해결하려면 보고서에 수정 사항을 포함시키는 것이 가장 좋습니다.수정 사항이 이미 Prettify에 의해 구현되었지만 여기서는 여전히 작동하지 않는 경우 Meta에서 기능 요청을 제기하여 Prettify의 새 버전을 배포하도록 요청하세요.

새로운 언어를 추가하도록 요청을 제출할 수도 있습니다. 동일한 문제 목록.스택 교환을 명심하십시오 하지 않습니다 이 구문 강조 표시를 유지하고 여기에 관련된 버그 보고서나 기능 요청을 Meta에 게시해도 문제가 수정되거나 구현되지 않습니다.

무엇이든 하기 전에 먼저 만들어 보세요. 확신하는 올바른 강조 표시가 켜져 있는지 확인하세요.

구문 강조를 위한 언어는 어떻게 결정되나요?

뒤에서 Stack Exchanges는 다음을 사용합니다. 질문의 태그 사용 중인 언어를 추론합니다.구문 강조 기능이 있는 태그가 두 개 이상인 경우 기본값을 사용하고 Prettify가 사용하기에 가장 적합한 언어가 무엇인지 추론할 수 있습니다.

태그에 언어 힌트가 있는지 궁금하다면 모든 사용자가 해당 태그의 위키 페이지를 방문하여 확인할 수 있습니다.해당 태그에 현재 사용되고 있는 언어 힌트(있는 경우)는 위키 버튼 아래 맨 아래에 표시됩니다.

Code language (used for syntax highlighting): lang-java

가능하다 명시적으로 재정의 코드 블록 위에 언어 힌트를 지정하여 선택한 언어와 함께 사용되는 강조 표시:

<!-- language: lang-or-tag-here -->

    code goes here

다음 중 하나를 사용할 수 있습니다. 언어 코드 또는 꼬리표 구문 강조를 활성화하려면 언어 힌트에 이름을 입력하세요.Prettify 지원 언어 코드의 전체 목록은 아래를 참조하세요.

예를 들어: 

Here is a code block with language code as hint:

<!-- language: lang-js -->

    function greet(person) {
        return "Hello " + person;
    }
    var user = "John Doe";
    alert(greet(user));

Here is a code block with tag name as hint:

<!-- language: typescript -->

    var arr = [0, 1, 2];

구문 강조를 원하지 않으면 다음을 사용할 수 있습니다. lang-none 언어:

<!-- language: lang-none -->

언어 힌트를 적용할 수도 있습니다. 모두 게시물의 코드 블록(각 블록 앞에 힌트를 추가할 필요가 없음):

<!-- language-all: lang-or-tag-here -->

힌트:언어 코드

이는 구문 강조를 위해 언어 힌트에 사용할 수 있는 모든 식별자의 전체 목록입니다.

핵심:

  • 기본:Prettify가 코드를 해석하고 추측하도록 하세요.
    default
  • 없음:명시적으로 구문 강조를 사용하지 마십시오.
    lang-none
  • Bash 및 기타 쉘 스크립팅
    lang-bash, lang-bsh, lang-csh, lang-sh
  • C, C++, Objective-C 등
    lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
  • 씨#
    lang-cs
  • 커피스크립트
    lang-coffee
  • HTML, XML, XSL 등
    lang-html, lang-xml, lang-xsl
  • 자바
    lang-java
  • 자바스크립트
    lang-js, lang-javascript
  • JSON
    lang-json
  • 펄
    lang-pl, lang-perl
  • 파이썬
    lang-py, lang-python, lang-cv
  • 정규식
    lang-regex
  • 루비
    lang-rb, lang-ruby
  • 녹
    lang-rc, lang-rs, lang-rust

확장:

힌트:태그

사이트에 존재하는 모든 태그를 지정할 수 있으며 현재 해당 태그와 연결된 언어 코드가 무엇이든 사용됩니다(둘 중 하나일 수 있음). 없는 (힌트 없음), 기본, 또는 특정한 언어 코드).

기본적으로 모든 태그는 다음으로 시작됩니다. none 언어 코드로 사용됩니다.태그 none 언어 코드로 지정된 것은 무시되고 다음으로 되돌아갑니다. default.

평상을 이용하셔도 됩니다 none 구문 강조 표시를 수동으로 지정하지 않는 키워드는 다음과 같습니다. lang-none 위의 코드.

편집자 참고 사항:

해당 목록이 존재한다고 100% 확신하지 않는 한 위 목록에 추가하지 마십시오. 뭔가를 입력하기만 하면 외모 올바르게 강조표시된 것처럼 하지 않습니다 식별자가 실제로 시스템에 존재한다는 의미입니다.유효하지 않은 식별자는 다음으로 되돌아갑니다. 기본. 편집 요약에 힌트가 있는지 확인하는 메타 질문에 연결하세요. 목록에 새로운 힌트를 추가할 때.

댓글 작성자를 위한 참고 사항:

본 FAQ의 댓글은 FAQ에서 이해가 되지 않는 부분에 대해 수정을 위해 명확한 설명을 요청하기 위한 것입니다.제발 하지 마라 앞으로 특정 언어가 지원될지 물어보세요.그건 ~ 아니다 Stack Exchange는 이 형광펜을 유지 관리하지 않기 때문에 우리가 대답할 수 있는 질문입니다.방문하다 Google 코드 프리티파이 언어 지원을 위해.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top