SW/JavaScript

Java Script : 새 코드에서 Prism.js 다시 렌더링하는 방법 : 예제, 구현

얇은생각 2020. 6. 30. 07:30
반응형

Java Script : 새 코드에서 Prism.js 다시 렌더링하는 방법 : 예제, 구현

 

최근에 다른 하이라이터와 달리 Prism.js라는 새로운 구문 하이라이터를 사용하도록 전환하였습니다. Prism.js는 기본적으로 매우 가벼우며, 추가 옵션을 추가하여 더 많은 옵션이나 새로운 테마를 라이브러리에 추가할 수 있습니다.

 

현재 선택할 수 있는 테마는 6가지 이며 다운로드 시 패키지에 포함할 테마를 선택할 수 있습니다. Prism.js는 매우 가볍도록 선택할 수 있습니다. Prism.js는 매우 가볍도록 설계되었으므로 추가 기능과 테마를 추가하면 패키지 크기가 늘어납니다. 

Prism.js는 다른 구문 하이라이터와 마찬가지로, 코드가 코드 편집기 내부에 있는 것처럼 보이는 것처럼 코드를 표시하기 위해 로드 시 코드 태그를 사전 및 코드 태그 내부에서 변경하도록 설계되었습니다. 

여기서 중요한 부분은 페이지 로드 이벤트에 있으며, 구문 하이라이터를 사용하여 Java Script로 작성준인 코드 또는 AJAX로 로드하는 컨텐츠를 표시하는 경우 문제가 됩니다. 따라서 페이지에 모든 코드를 렌더링 하려면 Prism 객체를 다시 렌더링하는 방법이 필요합니다.

페이지에 Prism Java Script 파일을 포함시키면 Prism 객체가 생성되며, 코드 태그 내부의 코드를 업데이트 하는 데 사용할 수 있는 다양한 방법에 액세스 할 수 있습니다. highlightAll()  메소드를 사용하면, 프리즘은 pre와 code 태그를 검색하고 모든 스타일을 다시 렌더링하여 올바르게 스타일을 지정합니다. 

Prism.highlightAll();

 

단일 요소만 다시 렌더링하려면 Java Script를 사용하여 이 요소를 선택하고 이를 매개 변수로 highlightElement() 메소드에 보낼 수 있습니다.

 

var precode = document.getElementById('application-code')
Prism.highlightElement(precode);
반응형