기본 콘텐츠로 건너뛰기

hilite.me를 이용하여 구글 블로그에 코드 올리기

0. "Color Scripter을 이용하여 구글 블로그에 코드 올리기" 포스팅을 통해 Color Scripter을 이용해서 구글 블로그에 소스 코드를 업로드할 경우 화면이 일그러지는 문제점을 확인하고 대안을 찾았다.

1. hilite.me
구글 블로그에 소스 코드를 올리기 위해 hilite.me(http://hilite.me/)를 사용해 보았다.
먼저 hilite.me에 접속한다. 아래와 같은 화면을 확인할 수 있다.



2. 좌측의 Source code 부분에 테스트할 코드를 작성하거나, 복사하여 붙여 넣는다.
코드를 작성하고 Language: Javascript, Style: monokai를 선택하고 Line numbers를 체크하면 아래와 같다.


3. 우측의 HTML의 코드를 복사하고, 구글 블로그를 "글쓰기" 모드에서 "HTML"모드로 바꾼 후 원하는 위치에 복사한 코드를 삽입한다. 코드 삽입 후 다시 "글쓰기" 모드로 돌아오면 아래와 같이 코드가 삽입된 것을 확인할 수 있다.


1
2
3
4
5
function init() {
    console.log("Hello World");
}

init();

4. 실제 포스팅된 이미지도 일그러짐이 없는 것을 확인했다. 이상 없다.

끝.
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

파이썬(Python)을 이용한 산점도(scatter) 그리기

파이썬의 Matplotlib를 이용해 데이터의 산점도(scatter plot)를 그릴 수 있다. 예시를 통해 살펴보자. 먼저 아래와 같이 데이터 프레임 예시를 만든다. 1 2 3 4 5 6 7 8 9 10 import pandas as pd height = [ 170 , 168 , 177 , 181 , 172 , 171 , 169 , 175 , 174 , 178 , 170 , 167 , 177 , 182 , 173 , 171 , 170 , 179 , 175 , 177 , 186 , 166 , 183 , 168 ] weight = [ 70 , 66 , 73 , 77 , 74 , 73 , 69 , 79 , 77 , 80 , 74 , 68 , 71 , 76 , 78 , 72 , 68 , 79 , 77 , 81 , 84 , 73 , 78 , 69 ] # DataFrame 만들기 body = pd . DataFrame( { 'height' : height, 'weight' : weight} ) body라는 이름의 데이터 프레임(테이블)이 만들어졌다. 이제, body 테이블의 데이터들의 분포를 산점도로 그려보자. 산점도를 그리는 코드는 아래와 같다. 1 2 3 4 5 6 7 8 9 10 # 산점도(scatter) 그리기 import matplotlib.pylab as plt plt . scatter( body[ 'weight' ], body[ 'height' ], label = "data" ) plt . legend(loc = "best" ) plt . xlabel( 'weight' ) plt . ylabel( 'height'
댓글 쓰기
자세한 내용 보기

웨딩 드레스 스케치 도안

웨딩 드레스샵 투어를 다니면서 샘플로 드레스를 입는 경우에는 드레스 사진을 찍지 못하게 하는 샵이 많다. ​ 그래서 투어를 돌고 나면 어떤 샵의 어떤 스타일이 신부에게 잘 어울렸는지 헷갈릴 수가 있다. ​ 하지만 투어를 다닐 때 드레스샵에서 입은 드레스의 특징과 느낌을 잘 기록하면 샵을 선택하는 데 도움이 될 수 있다. ​ 드레스 투어를 다닐 때 드레스를 기록할 스케치 도안은 아래 링크에서 확인/다운로드 할 수 있다. 웨딩 드레스 스케치 도안 확인/다운로드 하기 투어를 마친 후 드레스샵과 계약을 하고, 드디어 본식 드레스를 고를 때에는 사진을 찍을 수 있는 경우가 많다. ​ 이 땐 사진을 잘 찍어서 어떤 드레스를 입을지 잘 선택하도록 하자. ​ ​
댓글 쓰기
자세한 내용 보기

DEMOS Calculator - 웹에서 그래프 그리기

수식의 그래프를 그려보고 싶을 때 편리한 웹 서비스가 있어서 소개한다. DEMOS Calculator(https://www.desmos.com/calculator) DEMOS Calculator는 수식을 입력하면 자동으로 그래프를 그려준다. 아래는 로그함수를 입력한 모습이다. 좌측 영역의 수식 입력창에 수식을 입력하면 실시간으로 그래프를 확인할 수 있다. 좌측 상단의 햄버거 바를 클릭하면 아래와 같이 다양한 예시 그래프들도 확인할 수 있다. 수학식에 따라 그래프를 깔끔하게 그려야 할 때 요긴하게 사용할 수 있는 웹 서비스이다. 끝.
댓글 쓰기
자세한 내용 보기