구글 블로그(Blogger) 에서 

Code Scipter 사용

구글 블로그(Blogger, BlogSpot)에서 Code Scripter

• Code Scripter에서 클립보드에 복사 후 에러
• 짧은 상자를 화면에 가득차게 만들고 로고 지우기

구글 블로그에서 Code Scripter를 활용하여 코드를 삽입하는 것은 매우 까다로운 일이다. 기본적으로 클립보드에 복사를 한 다음 HTML페이지에 붙여넣고 다시 글쓰기 페이지로 돌아와서 글을 업로드 하면 원하는 출력이 나오지 않는다. 나의 경우에는 줄간격이 넓어지면서 깨지는 등 원하는 출력이 되지 않는다. 이를 해결하기 위해 white-space: pre; 를 white-space: nowrap; 으로 수정하거나 line-weight를 100%로 줄이는 등 다양한 방법을 시도해 보았지만 아무것도 해결되지 않았다. 그러다가 우연히 발견한 방법은 의외로 간단했다.

1. 로고 지우기

1
2
3
4
<div class="colorscripter-code" style="color: #f0f0f0; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; overflow: auto; position: relative !important;">
... (생략)</div>
<u><b><a href="http://colorscripter.com/info#e" style="color: white; text-decoration: none;" target="_blank"><span style="background-color: #4f4f4f; border-radius: 10px; color: white; font-size: 9px; padding: 1px; word-break: normal;">cs</span></a></b></u></pre>
</div>
Colored by Color Scripter
cs

Code Scripter에 코드를 작성하고 클립보드에 복사하기를 클릭하면 위와 같은 HTML코드가 복사된다. 이를 HTML 페이지에서 원하는 부분에 붙여넣기하면 우측하단에 CS라는 로고가 출력되고 이는 Code Scripter로 링크된다. 이를 제거하기 위해서는 굵은 글씨에 해당하는 태그를 모두 제거하면 된다.

---

2. 둥근 테두리의 상자에 담기

1
<pre style="background: #272727; border-radius: 6px; border: solid 2px #888888; color: #ffff; overflow: auto; white-space: pre-wrap;"></pre>
cs

---

3. Code Scripter로 깨지지 않게 업로드하기

매우 간단했다. 결과적으로 글쓰기 페이지가 아닌 HTML페이지인 상태에서 업로드 버튼을 누르면 정상적으로 업로드 되었다..

---

1
2
3
4
5
6
int main(){
    int i, sum=0;
    for(int i=0; i<n; i++){
        sum+=i;    
    }
}
cs

---