가끔 하늘을 보자: Blogger

2024년 5월 15일 수요일

구글 blogger 소스 코드 code-prettify

구글 blogger 소스 코드 code-prettify 적용하기

구글 blogger 좌측 메뉴 -> 테마 선택

맞춤설정 하위 메뉴 ->HTML 편집 선택

</head> 를 찾아 위에다가 구글에서 만든 아래 script 추가

출처 : https://github.com/googlearchive/code-prettify

코드가 사용될 블로그에서 HTML 모드로 변경 후 아래 추가

여기에 코드 작성

</pre>

2017년 4월 13일 목요일

Blogger 관련 Tip

1. 소스 코드 넣기

1-1. highlightjs 를 사용한다. (아래 링크 참고)

https://highlightjs.org/download/

1-2. cdnjs 사용
테마 -> HTML 편집 -> <head> 마지막에 붙여넣는다.
css style 은 취향게 맞게 변경 가능.


<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

1-3. 소스 코드를 html 모드로 편집
class 설정은 생략 가능. 알아서 처리됨. (ex: <code class="language-java">)


<pre><code>
// to do
</code></pre>

1-4. html 태그의 경우는 escape 시켜줘야한다.
관련 web site 는 많으니 검색해서 사용하면 된다.(html escape)

http://www.igorware.com/tools/xml-escape
http://www.blogcrowds.com/resources/parse_html.php

ps 1. 테마 변경시마다 1-2번 작업을 다시 해주어야 한다.
ps 2. 테마중 "동적 뷰" 의 경우는 동작하지 않으니 다른 방식으로 적용해야 한다.(구글링...)

2. 메뉴 넣기(상단 or 사이드)

2-1. 레이아웃 -> 전체열(가젯추가) -> 페이지 선택
2-2. 외부 링크 추가 -> 입력
웹주소 형식은 "http://블로그주소/search/label/라벨이름(태그이름)?max-results=숫자"
숫자는 해당 탭 선택시 보여질 페이지수. 1 권장.
예로, 페이지 제목 : "Android",
웹주소 : "http://seesky89.blogspot.kr/search/label/Android?max-results=1" 설정하면,
상단에 Android 탭이 생겨 사이드바의 태그와 동일한 기능을 한다.

3. 파일 첨부 하기

구글 드라이브 이용하여 링크 걸어야 한다.