Autoit richedit syntaxlighter

HTML, JavaScript,highlight.js 이용해 간단한 코드 편집기
로컬에서 사용하려면 highlight.js와 CSS 파일을 다운로드해 HTML 파일에 포함 시켜야 함

HTML + highlight.js

AutoIt GUI에서 RichEdit 대신 Embedded Web Browser를 사용하여 highlight.js 기반의 문법 강조 기능을 구현.

코딩 순서

HTML 파일 생성:
1. syntax_highlight.html 파일을 생성하고, 그 안에 highlight.js 를 사용한 코드 문법 강조 기능을 추가
AutoIt에서 Embedded Web Browser 사용:
1. GUICtrlCreateObj 와 Shell.Explorer.2 객체를 사용해 Internet Explorer 컨트롤을 생성.
2. HTML 파일을 Navigate 메서드로 불러와 표시
GUI 메시지 루프:
1. 사용자가 창을 닫을 때까지 메시지 루프를 유지

highlight.js HTML

syntax_highlight.html 파일


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AutoIt Syntax Highlight Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</head>
<body>
    <pre>
<code class="autoit">
; AutoIt 예제 코드
Func HelloWorld()
    MsgBox(0, "Hello", "Hello, AutoIt!")
EndFunc
</code>
    </pre>
</body>
</html>

* <pre><code class="autoit"> 태그는 문법 강조 영역
* AutoIt 코드: Embedded Web Browser로 HTML 로드

AutoIt 코드

Embedded Web Browser를 이용해 위의 HTML 파일을 표시


#include <GUIConstantsEx.au3>
#include <IE.au3> ; Embedded IE 컨트롤 사용

; GUI 생성
Local $hGui = GUICreate("Syntax Highlight Example", 800, 600)

; Embedded Web Browser 컨트롤 생성
Local $oIE = ObjCreate("Shell.Explorer.2")
Local $IECtrl = GUICtrlCreateObj($oIE, 10, 10, 780, 580)

; GUI 표시
GUISetState(@SW_SHOW)

; HTML 파일 로드
$oIE.Navigate(@ScriptDir & "\syntax_highlight.html")

; 메시지 루프
While 1
    Switch GUIGetMsg()
        Case $GUI_EVENT_CLOSE
            ExitLoop
    EndSwitch
WEnd

GUIDelete($hGui)
Exit

Comments