소스 코드를 HTML로 블록화하려면 어떻게해야합니까?

Question

This site은 예쁜 소스 코드 목록을 가지고 있습니다.

소스 코드를 들여다 보면 나는이 HTML 코드를 얻을.

<pre class="brush: cpp; wrap-lines: false;"> 

#ifndef PROGRESSSTATE_H_ 
#define PROGRESSSTATE_H_ 

class ProgressState { 

    ... 

#endif /* PROGRESSSTATE_H_ */ 
</pre> 

CSS는 마술을하는 것처럼 보입니다. 그렇다면 소스 코드가 나열된 CSS는 어떻게 생겼을까요? 그렇지 않은 경우 HTML로 소스 코드를 만드는 방법은 무엇입니까?

Answer 1

syntaxhighlighter과 같은 자바 스크립트 강조 라이브러리를 사용했을 가능성이 큽니다.

자바 스크립트는 CSS 클래스 이름을 선택하고 값을 사용하여 <pre> 태그의 내용을 강조하는 방식으로 강조 표시합니다.

DOM에 많은 변경 사항이 추가되었습니다. 특정 스타일의 추가 div 및 범위입니다.