분명 고3일 때 하라는 공부는 안 하고 블로그에 글을 쓰고 있었는데, 정신차려보니 어느덧 군 복무도 끝나가고 있습니다.
    새로운 마음으로 공부하고 작업한 내용을 기록하고자 새 Jekyll 블로그를 만들었습니다.

    댓글을 쓰셔도 보기가 어려우니, 불편하시더라도 궁금한 점은 옮긴 새 블로그에 댓글로 달아 주시면 성심성의껏 답변해 드리겠습니다. 감사합니다.
    2021년 2월 14일

    새 블로그 주소는 https://luftaquila.io입니다.
     

    LUFT - AQUILA

    A sky sailing Electron.

    luftaquila.io




    블로그에 저처럼 소스 코드를 업로드하시는 많은 분들이 신택스 하이라이터를 사용하고 계십니다.

    하지만 저 같은 경우엔 할 줄 아는 코딩이 아두이노, C, C#밖에 없는지라.. 블로그에 올리는 코드는 모두 아두이노 스케치죠.


    Syntax Highlighter를 맨 처음 설치하면 열몇개의 언어 브러쉬가 기본 탑재되어 있습니다만, 안타깝게도 아두이노는 없습니다.

    아두이노에서는 흔하게 쓰는데 다른 언어에는 없는 digitalWrite 등등은 어떤 브러쉬를 써도 하이라이팅이 안 되죠.


    구글에 SyntaxHighlighter Arduino Brush같은 검색어를 쳐 봐도 Wordpress 블로그 플러그인 적용 글만 나오더라고요.


    그래서 오늘은 아두이노 언어를 지원하게 만들어 주는 아두이노 브러쉬를 추가하고,

    더 나아가 저처럼 아두이노 코드만 올리는 분들을 위해 아두이노 테마까지 적용해 보겠습니다.



    우선 신택스 하이라이터 맨 처음 설치할 때 업로드했던 각종 브러쉬와 테마 파일들을 텍스트 파일로 뜯어보면,

    브러쉬 파일들은 하이라이팅을 할 구문들을 함수, 변수 등의 분류로 정하고, 테마 파일에서 색상을 지정해 주는 구조입니다.


    이 형식 그대로 아두이노가 인식하는 구문들을 모아서 파일을 만들어 주면 됩니다.



    이런 식으로 말이죠. 물론 이미 작성된 파일이 있습니다.


    shBrushArduino.js shThemeArduino.css


    .js 확장자가 브러시 파일이고 .css 확장자는 테마 파일입니다.

    이걸 맨 처음 신택스 하이라이터 적용하실 때처럼 관리자 모드의 HTML/CSS 편집 탭의 파일 업로드에 업로드해 주세요.

    그 다음에 HTML 편집 창에 신택스 하이라이터 설치하실 때 추가하신 구문들이 있을 텐데요.

    그 밑에 


    <script type="text/javascript" src="./images/shBrushArduino.js"></script>


    이거 한 줄도 같이 추가해 주시면 됩니다.



    테마 같은 경우는 제가 사용하는 아두이노 스케치와 최대한 동일하게 보이도록 제가 직접 색상 추출해서 넣은 건데요.

    이 테마를 적용하시려면


    <link type="text/css" rel="stylesheet" href="./images/shThemeArduino.css">


    테마 설정 구문을 이렇게 바꿔주시면 됩니다.

    만약 색상을 다르게 하고 싶으시다 하시면, 직접 컬러코드를 지정해서 넣어 주시면 되는데요.

    파일을 메모장으로 열어 보시면 각 분류별로 색상이 지정되신 것을 보실 수 있습니다.


    그 중 주로 사용하고, 또 가장 많이 보는 분류만 모아 보면 이 정도입니다.


    .syntaxhighlighter .functions {

      color: #CC6600 !important;}


    .syntaxhighlighter .datatypes {

      color: #02CBD6 !important;}


    .syntaxhighlighter .constants {

      color: #02CBD6 !important;}


    .syntaxhighlighter .variable {

      color: #02CBD6 !important;}


    .syntaxhighlighter .keywords {

      color: #D33F55 !important;}


    .syntaxhighlighter .keyword {

      color: #3f41d3 !important;}


    .syntaxhighlighter .preprocessor {

      color: #7B8C4B !important;}


    .syntaxhighlighter .plain, .syntaxhighlighter .plain a {

      color: black !important;}


    .syntaxhighlighter .comments, .syntaxhighlighter .comments a {

      color: #7E7E7E !important;}


    .syntaxhighlighter .string, .syntaxhighlighter .string a {

      color: blue !important;}


    #CC6600은 digitalWrite같은 구문에 적용되는 주황색입니다.

    #02CBD6은 밝은 하늘색, #3f41d3은 진한 푸른색이고요.


    제가 지정해 둔 색상이 마음에 안 드신다면 직접 하나씩 바꿔가시면서 확인해 보시면 될 것 같습니다.



    Posted by LUFT - AQUILA