코딩하면서 갬성쩌는 키보드는 어떠신가요?
텐키리스라서 컴팩트하고, 갈축이라 소음도 적습니다!!
COX 게이트론 LED 게이밍 기계식 키보드 갈축
COUPANG
www.coupang.com
파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
코딩 관련 블로그 운영을 하는 사람이라면 누구나 소스 코드를 깔끔하게 포스팅 하고 싶을 듯합니다.
이번 포스팅에는 소스코드를 에디터처럼 보이게 포스팅하는 법을 알아보도록 하겠습니다.
<소스코드를 입력하는 방법은 2가지가 있습니다>
1. Color Scripter
-> 소스코드를 변환시켜주는 웹서비스를 이용하는 방법입니다.
2. SnytaxHighlighter
-> 자바스크립트에 오픈소스를 입력하여 포스팅시 필요에 따라 태그를 달아 사용하는 방법입니다.
● Color Scripter, 컬러 스크립트
1. https://colorscripter.com/ 에 접속(클릭시 새창으로 이동)
2. 소스 입력
3. 언어 선택
4. 클립보드에 복사 클릭
5. ctrl + v로 붙여넣기
● SyntaxHighlighter, 신택스 하이라이터
1. zip 파일 다운 후 압축풀기
http://alexgorbatchev.com/SyntaxHighlighter 에 접속하여 파일 다운 받거나
아래의 파일 받아서 압축 푸시면 됩니다.
2. 압축푼 파일 중 scriptes 폴더와 styles 폴더의 내용 모두를 파일업로드
3. 아래의 소스를 HTML 문서중 <head></head> 사이에 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!-- source highlighter start -->
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shAutoloader.js" type="text/javascript"></script>
<script src="./images/shBrushAppleScript.js" type="text/javascript"></script>
<script src="./images/shBrushAS3.js" type="text/javascript"></script>
<script src="./images/shBrushBash.js" type="text/javascript"></script>
<script src="./images/shBrushColdFusion.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushCSharp.js" type="text/javascript"></script>
<script src="./images/shBrushCss.js" type="text/javascript"></script>
<script src="./images/shBrushDelphi.js" type="text/javascript"></script>
<script src="./images/shBrushDiff.js" type="text/javascript"></script>
<script src="./images/shBrushErlang.js" type="text/javascript"></script>
<script src="./images/shBrushGroovy.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushJavaFX.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shBrushPerl.js" type="text/javascript"></script>
<script src="./images/shBrushPhp.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushPowerShell.js" type="text/javascript"></script>
<script src="./images/shBrushPython.js" type="text/javascript"></script>
<script src="./images/shBrushRuby.js" type="text/javascript"></script>
<script src="./images/shBrushSass.js" type="text/javascript"></script>
<script src="./images/shBrushScala.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushVb.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<script src="./images/shLegacy.js" type="text/javascript"></script>
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeMidnight.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all()
</script>
<!-- source highlighter end -->
|
cs |
4. <body>부분을 아래의 소스로 변환
|
1
|
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
|
cs |
만약 스킨을 적용해서 body 부분이 <body>가 아닌 다른 것들이 적혀있다면
Onload="dp.SyntaxHighlighter.HighlightAll('code');"
이부분만 추가해주시면 됩니다.
5. 사용법
소스 입력할 때 HTML 모드로 변환후 아래 코드 틀안에서 소스를 작성하시면 됩니다.
|
1
2
3
|
<textarea name="code" class="brush: 사용하는 언어;">
소스코드
</textarea>
|
<예시>
|
1
2
3
4
5
6
7
|
<textarea name="code" class="brush: cpp;">
#include <stdio.h>
int main(){
printf("Hello World\n");
return 0;
}
</textarea>
|
cs |
사용할 언어는
|
언어 |
brush:뒤에 쓸내용 |
|
C, C++ |
cpp, c |
|
C# |
c-sharp, csharp |
|
CSS |
css |
|
Java |
java |
|
Java Script |
js, jscript, javascript |
|
PHP |
php |
|
Python |
py, python |
|
Ruby |
ruby, ror, rails |
|
SQL |
sql |
홈페이지에 가면 더 자세히 알수 있습니다.
코딩하면서 갬성쩌는 키보드는 어떠신가요?
텐키리스라서 컴팩트하고, 갈축이라 소음도 적습니다!!
COX 게이트론 LED 게이밍 기계식 키보드 갈축
COUPANG
www.coupang.com
파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
'티스토리(TISTORY)' 카테고리의 다른 글
| 크롬으로 티스토리 "사진첨부" "임시저장 활성화" 하는 법 (0) | 2017.07.01 |
|---|