김보안의 블로깅
  • 🏠 Home
  • 📚 Project
    • Blockchain
      • 🎦 PickMe
      • 🎦 IoTC
      • 🎦 Blackchain
      • 📃 Gemology
      • 🎦 PickMe
      • 🎦 PickMe
    • AI
      • 👋 A.I. Dream Reader
      • 🎦 A.I. Dream Reader
    • Security
      • 🎦 SNAC
    • Education
      • 🎦 Smart Lecture
  • 🤸‍♂ Hobby
    • Music
      • Violin
      • Guitar
      • Piano
      • Drum
    • Flower
      • Flower Certificate
    • Sport
      • Ski
      • Skateboard
      • Golf
      • Boxing

2020년 5월 13일 수요일

구글 블로그(블로거)에서 프로그램 언어 코드 예쁘고 쉽게 넣는 방법 - 1

 SecureKim     오후 2:10     구글, 블로거, 코드 넣기, 코드 삽입, Blogger, Code, Program     2 comments   


이전부터 구글 블로거에서 쓰고 있던 아름다운 표시 방법을 정리한다.

이것은 다른 블로그 사이트도 비슷하게 적용 가능하다.

이번 포스팅에서는 SyntaxHighlither를 이용, 글 쓸 때 아래처럼 HTML 편집을 선택하고



코드의 시작과 끝에 다음과 같이 선언만 해 주면 코드가 예쁘게 보이도록 할 것이다.

원하는 Javascript 코드
그런데 프로그래밍 언어 마다 예약어가 다르므로,
언어에 맞는 색깔을 칠하기 위해서는 해당 언어에 해당하는 Brush를 설정해 주어야 한다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

이 설정을 전역적으로 적용해 주기 위해서,
blogger.com 에 접속해서 테마 - HTML편집을 누르고
코드의 HEAD 부분에 Core css, Core js, 원하는 브러시의 js 파일을 지정 한다.



독자들을 위해 아래에 복붙 가능한 코드를 제공하도록 하겠다.
필자의 경우 Cpp, Java, JScript, Python, Bash, HTML 을 사용하므로 아래와 같이 설정했다.

그리고 본 예제는 DJango 테마를 선택했는데, 테마가 더 많이 존재한다.
따라서 이중에 블로그에 잘 맞는 테마를 선택해서 넣으면 된다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

또한 HTML 사용시 주의할 점이 있는데, <script ~~~ />로 된 단일 코드를 인식하지 못한다는 점이다.
따라서 <script> </script> 와 같이 꼭 닫는 코드를 넣어 주어야 한다.


속도를 좀 더 빠르게 하는 방법

ㆍ이렇게 전역으로 지정하지 않고, 글 마다 HTML 코드에 넣어주고 필요한 코드만 적용해 주면 속도가 더 빠르지만 매우 귀찮으며, 테마나 Syntax 툴을 바꾸려면 모든 글을 수정해야 하므로 엄청난 비효율이다.

ㆍ참고로 http://alexgorbatchev.com/pub/sh/current/ 같이 현재 최신 버전을 로딩 하게 해도 되는데, 결국 3_0_83 버전으로 리다이렉트 되면서 시간이 소요되므로 비추.

ㆍ코드를 Minify 해서 js 코드를 직접 형태로 넣어주면 파일 다운로드 횟수가 줄기 때문에 좀 더 빨라진다.


다음 회차에서는 수학 기호를 예쁘게 넣는 방법에 대해서 알아본다.


  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
이메일로 전송BlogThis!Twitter에서 공유Facebook에서 공유
최근 게시물 이전 게시물 홈

댓글 2개:

  1. LiveBlogger2021년 4월 18일 오전 9:34

    잘 보고 갑니당

    답글삭제
    답글
    1. SecureKim2021년 9월 29일 오후 6:32

      방문 감사합니다 ^^

      삭제
      답글
        답글
    2. 답글
댓글 추가
더 로드하기...

페이지

  • 홈
  • Hobby

Categories

  • AI
  • android
  • AWS
  • Blockchain
  • Hardware
  • Javascript
  • mysql
  • Node.js
  • Plasma
  • review
  • Security
  • Study
  • Video
  • windows

Popular Posts

  • 회사 프록시와 인증서에 고통받는 그대를 위한 글 (Bash, Gradle, Python, wget, nodejs(npm), apt-get, cURL, git, yarn, androidStudio)
    대기업에 입사하면 장단점이 있는데, 단점 중에 하나가 회사에서 프록시를 사용하여 트래픽 감시를 하므로 프록시 설정을 해주어야 한다는 점 입니다. 특히, 회사에서는 https 트래픽도 감시를 하므로 인증서도 설정해 주어야 합니다. 그런데 문...
  • Termux 로 안드로이드에 우분투(GUI)와 VSCode설치하기
      많은 글들이 있지만 뭔가 대부분 잘 안됐다. 이번 기회에 정리한다. 0. 먼저 Termux와 Remote Desktop Manager를 설치한다. Remote Desktop Manager 대신 아래도 나쁘지 않다. 화면이 작지만 마우스 스크롤이나 ...
  • Node.js 에서 RSA 로 암복호화 하기
    Node.js 의 crypto 모듈은 기본적으로 제공되므로, npm 으로 설치할 필요가 없습니다. crypto 기본 모듈을 사용해 RSA 의 키로 암복호화 하는 방법을 알아 봅시다. 일단 그 전에 OpenSSL로 RSA Private Key...

Blog Archive

  • ►  2023 (1)
    • ►  1월 (1)
  • ►  2022 (10)
    • ►  12월 (1)
    • ►  11월 (3)
    • ►  9월 (1)
    • ►  8월 (1)
    • ►  6월 (2)
    • ►  3월 (2)
  • ►  2021 (9)
    • ►  12월 (3)
    • ►  11월 (1)
    • ►  6월 (1)
    • ►  5월 (2)
    • ►  4월 (2)
  • ▼  2020 (12)
    • ►  10월 (1)
    • ►  9월 (2)
    • ►  7월 (1)
    • ►  6월 (1)
    • ▼  5월 (5)
      • [Windows Batch Script] 하위 디렉토리 포함 특정 확장자를 제외하고 모두 ...
      • 구글 블로그(블로거)에서 프로그램 수학 기호 예쁘고 쉽게 넣는 방법
      • 구글 블로그(블로거)에서 프로그램 언어 코드 예쁘고 쉽게 넣는 방법 - 1
      • 메이플스토리M 강화 확률 시뮬레이션 계산기
      • 삼성 타이젠 MiTM 인증서 검증 버그 및 취약점
    • ►  4월 (1)
    • ►  2월 (1)
  • ►  2019 (14)
    • ►  10월 (2)
    • ►  7월 (1)
    • ►  3월 (4)
    • ►  2월 (2)
    • ►  1월 (5)
  • ►  2018 (14)
    • ►  12월 (2)
    • ►  11월 (4)
    • ►  10월 (1)
    • ►  8월 (2)
    • ►  5월 (4)
    • ►  1월 (1)
  • ►  2017 (12)
    • ►  10월 (2)
    • ►  9월 (9)
    • ►  5월 (1)
  • ►  2016 (8)
    • ►  10월 (2)
    • ►  8월 (1)
    • ►  6월 (1)
    • ►  1월 (4)
  • ►  2015 (6)
    • ►  12월 (3)
    • ►  10월 (1)
    • ►  6월 (1)
    • ►  5월 (1)
  • ►  2014 (10)
    • ►  11월 (1)
    • ►  9월 (1)
    • ►  7월 (1)
    • ►  6월 (1)
    • ►  5월 (3)
    • ►  4월 (1)
    • ►  3월 (2)
  • ►  2013 (28)
    • ►  12월 (3)
    • ►  11월 (6)
    • ►  10월 (6)
    • ►  9월 (6)
    • ►  8월 (1)
    • ►  7월 (3)
    • ►  6월 (3)

구독

글
Atom
글
댓글
Atom
댓글

로드 중입니다...

각오

직접 해보지 않은 것은 포스팅 하지 않겠습니다.

Copyright © 김보안의 블로깅 | Powered by Blogger
Design by Hardeep Asrani | Blogger Theme by NewBloggerThemes.com | Distributed By Gooyaabi Templates