환영합니다. 바다아이 홈페이지 입니다.

'싸우지 않는 이재명을 규탄한다. 민생충, 협치충, 역풍충.. 국민들은 치가 떨린다.'

이번주 로또 및 연금번호 발생!! |

HOME |

여기는? |

바다물때표 |

알림 (16) |

여러가지 팁 (1059) |

추천 및 재미 (156) |

자료실 (22) |

시사, 이슈, 칼럼, 평론, 비평 (613) |

끄적거림 (136) |

문예 창작 (716) |

바람 따라 (75) |

시나리오 (760) |

드라마 대본 (248) |

살인!

리눅스 데스크탑 (230)
리눅스 서버 (148)
윈도우 관련 (8)
freebsd 데스크탑 (31)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (48)
html5 (4)
golang (179)
php (2)
디자인 관련 (1)
javascript/jquery (76)
DATABASE (9)
mariadb, mysql (33)
postgresql (45)
생활/쇼핑 (39)
컴퓨터/핸드폰 (45)
종교/자선 (3)
요리관련 (22)
음식관련 (15)
의학관련 (8)
건강/운동 관련 (13)
주식, 금융관련 (3)
자동차, 운전 관련 (21)
기계 관련 (9)
스포츠 관련 (1)
과학, 수학관련 (1)
문학관련 (8)
좋은 글 (7)
낚시관련 (1)
원예관련 (9)

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

html/css/xml

html/css/xml - 블로그/웹에서 소스코드 하이라이트/구문강조 사용하기

이 름 : 바다아이 | 조회수 : 9943

구글 블로거(Blogger), 티스토리(Tistory)등 여러 블로그나 웹 페이지에서 소스 코드를 공유하시려는 분들에게 code prettify를 소개합니다. 
라이선스는 아파치 라이선스2.0 입니다. 
 
소스 코드의 가독성 향상을 위해 소스 코드 하이라이트를 적용했는데, 여러가지 자바스크립트 라이브러리 중 &quot;code prettify&quot;가 심플해보여서 선택했습니다. 
블로그나 웹 사이트에 코드를 공유하실 예정이고 심플한걸 원하시는 분들에게 추천합니다. 
 
설정 
아래 스크립트 태그를 삽입해주세요. 
 
&lt;script src=&quot;https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js&quot;&gt;&lt;/script&gt; 
 
&nbsp; 
사용하기 
pre, code, xmp 의 class 요소에 prettyprint 를 넣어주면됩니다. 
 
&lt;pre class=&quot;prettyprint&quot;&gt; 
class Voila { 
&nbsp;&nbsp;&nbsp; public: 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Voila 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; static const string VOILA = &quot;Voila&quot;; 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // will not interfere with embedded &lt;a href=&quot;#voila2&quot;&gt;tags&lt;/a&gt;. 
} 
&lt;/pre&gt; 
 
&nbsp; 
기본 지원 언어 
위 예제로 지원 가능한 언어는 아래와 같습니다. 
C, C++, C#, PHP, Ruby, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Rust 
 
확장 지원 언어 그리고 옵션 
처음에 추가한 자바스크릅트에 옵션을 추가하면 더 많은 언어를 지원하며 테마도 변경 가능합니다. 
 
&nbsp;&nbsp;&nbsp; 확장 지원 언어 
&nbsp;&nbsp;&nbsp; Apollo, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, Llvm, Lua, Matlab, MLs: F#, Ocaml,SML, Mumps, Nemerle, Pascal, Protocol buffers, R, S, RD, Scala, SQL, TCL, Latek, Visual Basic, CHDL, Wiki, XQ, YAML 
&nbsp;&nbsp;&nbsp; 테마 
&nbsp;&nbsp;&nbsp; 테마는 5가지만 지원합니다. 디자인을 보시려면 &quot;Gallery of themes for code prettify&quot;에서 확인 가능합니다. 
&nbsp;&nbsp;&nbsp; 5가지 테마 명: Default, Desert, Sunburst, Sons-Of-Obsidian, Doxy 
&nbsp;&nbsp;&nbsp; 확장 지원 언어와 테마 적용 방법 
&nbsp;&nbsp;&nbsp; 스크립트를 아래와 같이 추가하고 싶은 언어 만큼 lang 옵션으로 넣어주고, skin으로 테마 지정이 가능합니다. 
&nbsp;&nbsp;&nbsp; 더 자세한 옵션 정보는 &quot;Auto-Loader&quot; 페이지에서 확인 가능합니다. 
 
&nbsp;&nbsp;&nbsp; &lt;script src=&quot;https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;lang=sql&amp;skin=desert&quot;&gt;&lt;/script&gt; 
 
&nbsp;&nbsp;&nbsp; 확장 언어에 대해서는 class 요소에 언어를 표시해줄 요소가 추가해줘야 합니다. 
 
&nbsp;&nbsp;&nbsp; &lt;pre class=&quot;prettyprint lang-sql&quot;&gt;SELECT * FROM table_name LIMIT 10;&lt;/pre&gt; 
 
&nbsp;&nbsp;&nbsp; 라인 번호 지정 
&nbsp;&nbsp;&nbsp; class 요소에 linenums를 넣어주면 1부터 시작하며, linenums:숫자를 입력하면 지정한 숫자부터 번호가 시작됩니다. 
 
&nbsp;&nbsp;&nbsp; &lt;pre class=&quot;prettyprint linenums&quot;&gt; 
&nbsp;&nbsp;&nbsp; Many 
&nbsp;&nbsp;&nbsp; lines 
&nbsp;&nbsp;&nbsp; of 
&nbsp;&nbsp;&nbsp; code 
&nbsp;&nbsp;&nbsp; &lt;/pre&gt; 
 
&nbsp; 
마무리하며 
더 이쁜 테마를 원하신다면 Paraiso-Google-Code-Prettify 사이트를 방문하시면 원하시는 테마를 찾을 수 있을게요. 
공식적으로 5개 지원이지만 개발자들의 참여로 많은 테마가 있습니다. 
 
그리고 스크립트 주소의 CDN 도메인은 &quot;GitHub 저장소의 자바스크립트 파일을 외부에서 사용하기&quot;로 포스팅한 적이 있는데 알아두시면 Github에서 관리되고 있는 여러 소스를 별도의 서버 없이 사용하실 수 있습니다. 
 
 
출처 : http://blog.gaerae.com/2015/09/google-code-prettify.html 
 
&nbsp;

짧은 주소 : https://www.bada-ie.com/su/?381591778922

1.png - 88 KB 다운수 : 16 회

구글 블로거(Blogger), 티스토리(Tistory)등 여러 블로그나 웹 페이지에서 소스 코드를 공유하시려는 분들에게 code prettify를 소개합니다.
라이선스는 아파치 라이선스2.0 입니다.

소스 코드의 가독성 향상을 위해 소스 코드 하이라이트를 적용했는데, 여러가지 자바스크립트 라이브러리 중 "code prettify"가 심플해보여서 선택했습니다.
블로그나 웹 사이트에 코드를 공유하실 예정이고 심플한걸 원하시는 분들에게 추천합니다.

설정
아래 스크립트 태그를 삽입해주세요.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

사용하기
pre, code, xmp 의 class 요소에 prettyprint 를 넣어주면됩니다.

<pre class="prettyprint">
class Voila {
 public:
 // Voila
 static const string VOILA = "Voila";

 // will not interfere with embedded <a href="#voila2">tags</a>.
}
</pre>

기본 지원 언어
위 예제로 지원 가능한 언어는 아래와 같습니다.
C, C++, C#, PHP, Ruby, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Rust

확장 지원 언어 그리고 옵션
처음에 추가한 자바스크릅트에 옵션을 추가하면 더 많은 언어를 지원하며 테마도 변경 가능합니다.

 확장 지원 언어
 Apollo, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, Llvm, Lua, Matlab, MLs: F#, Ocaml,SML, Mumps, Nemerle, Pascal, Protocol buffers, R, S, RD, Scala, SQL, TCL, Latek, Visual Basic, CHDL, Wiki, XQ, YAML
 테마
 테마는 5가지만 지원합니다. 디자인을 보시려면 "Gallery of themes for code prettify"에서 확인 가능합니다.
 5가지 테마 명: Default, Desert, Sunburst, Sons-Of-Obsidian, Doxy
 확장 지원 언어와 테마 적용 방법
 스크립트를 아래와 같이 추가하고 싶은 언어 만큼 lang 옵션으로 넣어주고, skin으로 테마 지정이 가능합니다.
 더 자세한 옵션 정보는 "Auto-Loader" 페이지에서 확인 가능합니다.

 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&lang=sql&skin=desert"></script>

 확장 언어에 대해서는 class 요소에 언어를 표시해줄 요소가 추가해줘야 합니다.

 <pre class="prettyprint lang-sql">SELECT * FROM table_name LIMIT 10;</pre>

 라인 번호 지정
 class 요소에 linenums를 넣어주면 1부터 시작하며, linenums:숫자를 입력하면 지정한 숫자부터 번호가 시작됩니다.

 <pre class="prettyprint linenums">
 Many
 lines
 of
 code
 </pre>

마무리하며
더 이쁜 테마를 원하신다면 Paraiso-Google-Code-Prettify 사이트를 방문하시면 원하시는 테마를 찾을 수 있을게요.
공식적으로 5개 지원이지만 개발자들의 참여로 많은 테마가 있습니다.

그리고 스크립트 주소의 CDN 도메인은 "GitHub 저장소의 자바스크립트 파일을 외부에서 사용하기"로 포스팅한 적이 있는데 알아두시면 Github에서 관리되고 있는 여러 소스를 별도의 서버 없이 사용하실 수 있습니다.

출처 : http://blog.gaerae.com/2015/09/google-code-prettify.html

1 page / 2 page
번 호	카테고리	제 목	이름	조회수
48	html/css/xml	자주 쓰는 엔티티코드... 사용 빈도수가 높은 엔티티 코드 정리	바다아이	2368
47	html/css/xml	ckeditor 소스보기 누르면 css 날아가는 현상,,, 문제.. ckeditor 소스보기 문제	바다아이	3625
46	html/css/xml	ckeditor font size 설정하기, ckeditor 기본 폰트 크기 설정, ckeditor 줄바꿈 <br>, width height 설정.	바다아이	4861
45	html/css/xml	robots.txt, 사이트 검색 로봇 설정...	바다아이	6630
44	html/css/xml	CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격, 자간	바다아이	6841
43	html/css/xml	ie 인터넷 익스플로러 폰트 적용 문제, 인터넷 익스플로러 나눔폰트 적용...	바다아이	6908
42	html/css/xml	html 에서 탭 tab 키 사용하기, 표현하기....	바다아이	11193
41	html/css/xml	css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치	바다아이	8980
40	html/css/xml	pt, px, em, %, font 폰트 글꼴의 단위에 따른 크기 사이즈 비교표, 폰트 크기, 글씨 크기	바다아이	8671
39	html/css/xml	폰트 글꼴(font face) 목록	바다아이	8814
38	html/css/xml	고정 레이어 예제....	바다아이	8974
37	html/css/xml	html 문서 MIME 타입 확인...	바다아이	11576
36	html/css/xml	ckeditor ajax 통신시 본문값이 빈값으로 들어가는 문제....	바다아이	9310
35	html/css/xml	[정규표현식] 정규표현식 정리, 정규식	바다아이	12601
34	html/css/xml	홈페이지, 사이트 주소 앞에 아이콘, 주소창 작은 아이콘, ico 파일	바다아이	8871
33	html/css/xml	브라우저 input 태그의 자동완성 기능 해제하기, 끄기 autocomplete	바다아이	9356
32	html/css/xml	[CSS] 테두리 및 외곽선을 둥글게 표현하기, border-radius, 라운드	바다아이	10293
31	html/css/xml	ckeditor 4 메뉴 툴바 도구 선택...	바다아이	11154
30	html/css/xml	HTTP/2 왜 지금 적용해야 하는가?	바다아이	16832
29	html/css/xml	HTTP/2란 무엇인가?	바다아이	9184
28	html/css/xml	사이트맵 xml 예제.... sitemap.xml	바다아이	9133
27	html/css/xml	ckeditor config.js 설정 기본값....	바다아이	9999
26	html/css/xml	이미지 없을 때 엑스박 대신 다른 이미지 보여주기	바다아이	9873
25	html/css/xml	레이어 팝업 소스	바다아이	9042
24	html/css/xml	테이블, 이미지 테두리관련 border 스타일	바다아이	9066
23	html/css/xml	테이블 깨짐, 깨지는 것 방지	바다아이	9796
22	html/css/xml	특수문자 코드표 (=특수문자 HTML 엔티티 코드), entity code	바다아이	10039
21	html/css/xml	원화(Won;￦) 대신 백슬래시(＼;Backslash; 백슬래쉬)로 나타내기, 역슬래시, 역슬래쉬	바다아이	12741
20	html/css/xml	특수문자 리스트	바다아이	9551
현재글	html/css/xml	블로그/웹에서 소스코드 하이라이트/구문강조 사용하기	바다아이	9944
1 2
\| \|

Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.0639 초
to webmaster... gogo sea. gogo sea.