프로알라 highlighter 기능 추가 > 기능 소개

구매자분 한 분이 요청하셔서 제작했습니다.

마침 저도 필요했던 기능이라...

1. editor.lib.php  

아래 코드를 추가 해주세요.

$html .= "<script type=\"text/javascript\" src=\"{$editor_url}/js/third_party/highlighter.js\"></script>";
$html .= "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script>";
$html .= "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js\"></script>";

2. sir_custom.css

아래 css를 추가해주세요

.language-label {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.75); /* 반투명 검은색 배경 */
  color: white;
  padding: 3px 6px;
  border-radius: 0 0 0 5px; /* 왼쪽 아래 모서리 둥글게 */
  font-size: 0.75rem;
}
pre > span {position: relative;}

3. 관리자페이지->레이아웃 추가설정

추가 script, css에 아래 코드를 추가해주세요.

* 여기서 css를 바꿈으로써 highlight의 디자인 변경이 가능합니다. 미리보기는 여기 주소를 참고해주세요.

Demo : https://highlightjs.org/demo

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<link rel="stylesheet" href="/plugin/editor/froala_editor_4.2.0/css/plugins/highlight/atom-one-dark.css">

4. Froala.js에 메뉴버튼 및 옵션 추가

4-1. 메뉴를 출력 할 위치에 'Highlight' 넣어주세요

 4-2. 아래 코드를 삽입해주세요.

htmlAllowedEmptyTags: ['span','br'],
htmlAllowedStyleProps:['white-space'],

완성!!

추가된 버튼 모습

이미지 캡션