김보안의 블로깅
  • 🏠 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!X에 공유Facebook에서 공유
최근 게시물 이전 게시물 홈

댓글 2개:

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

    잘 보고 갑니당

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

      방문 감사합니다 ^^

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

페이지

  • 홈
  • Hobby

Categories

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

Popular Posts

  • 회사 프록시와 인증서에 고통받는 그대를 위한 글 (Bash, Gradle, Python, wget, nodejs(npm), apt-get, cURL, git, yarn, androidStudio)
    대기업에 입사하면 장단점이 있는데, 단점 중에 하나가 회사에서 프록시를 사용하여 트래픽 감시를 하므로 프록시 설정을 해주어야 한다는 점 입니다. 특히, 회사에서는 https 트래픽도 감시를 하므로 인증서도 설정해 주어야 합니다. 그런데 문...
  • 블랙보드 강의 녹화 영상 다운로드 가능한 방법 (노설치)
    별도의 설치도 필요 없고 아주 쉽습니다. 구글 크롬브라우저 에서 블랙보드 녹화 영상에  다운로드 가능한 메뉴가 나오게 하는 코드입니다.  먼저 블랙보드 강의자료에 입장하고, 재생 버튼을 클릭 하지 않은 상태로 F12 를 입력합니다. 재생을 클릭하지 마...
  • 다빈치리졸브로 영상의 음성 보정 (잡음 노이즈 없애기)
      잡음 없애는 방법 1. 음악 쪽 들어가서 음악에서 소스 우클릭 - Normalize Audio Levels 2. 우측의 Mixer에서 Dynamics 더블클릭, Effects아래 +누르고 Metering에 Meter 그럼 아래처럼 나오는데  Gat...

Blog Archive

  • ►  2024 (2)
    • ►  11월 (2)
  • ►  2023 (2)
    • ►  10월 (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