블로그에 소스코드 넣기 간편하게 해결

컴퓨터 프로그래밍 블로그를 작성하시는 분들에게 좋은 정보일 것 같은데요. html 또는 java 등 프로그래밍한 소스코드를 블로그에 작성할 때 캡쳐를 이용하여 올리면 캡쳐한 이미지가 본문보다 작을 경우는 크게 문제가 되지 않지만 작을 경우 이미지가 깨져서 글자가 잘 안보이는 경우가 있습니다.

이럴 때 Color Scripter 라는 사이트를 이용하면 간편하게 해결할 수 있는데요. 블로그에 소스코드 넣기를 할 수 있습니다. 그러면 굳이 캡쳐를 하지 않고 코드를 소스 코드 처럼 넣을 수 있기 때문에 글자가 깨지는 경우가 없습니다.

블로그에 소스코드 넣기 간편하게 해결

티스토리 블로그에 소스코드를 넣는 방법은 여러가지가 있겠지만 Color Scripter 사이트에서 HTML 소스코드를 복사하여 티스토리 블로그에 있는 HTML 편집에 들어가서 코드를 복사해 넣으면 됩니다.

먼저 사이트에 접속해 보겠습니다. https://colorscripter.com/  주소를 클릭하면 사이트로 이동합니다. 그럼 아래 사진처럼 사이트가 나타납니다.

이제 사용하는 프로그램에서 소스코드를 블록을 씌워 "Ctrl + C" 복사를 합니다.

ColorScripter에서 언어를 먼저 선택해 줍니다. 그런데 선택을 하지 않더라도 소스를 붙여넣으면 자동으로 변경해 줍니다.

복사한 소스코드를 "Ctrl + V"로 붙여 넣기를 합니다. 그리고 하단에 있는 "HTML로 복사" 클릭합니다.

작은 창이 하나 나타나는데요. 마우스를 올려놓고 오른쪽 마우스를 누른 다음 복사를 선택합니다.

그리고 티스토리 블로그로 와서 오른쪽 상단에 있는 HTML 버튼을 클릭합니다.

HTML 편집 화면에서 붙여넣기 할 위치에 소스코드를 붙여 넣기를 합니다.

그러면 아래와 같이 블로그에 소스코드가 들어가게됩니다.

package com.example.myapplication;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
 

이미지로 캡쳐했을 때보다 글씨가 선명하게 보이기 때문에 블로그를 보시는 분들도 편하게 보실 수 있어서 좋습니다. 그리고 스타일패키지를 선택하면 기본, 핑크레몬에이드, 서브라임 블랙 3가지 스타일을 선택할 수 있습니다.

배경색도 변경할 수 있으며 세부설정에서는 가로, 세로 길이도 조절할 수 있습니다. 소프트웨어 관련 블로그를 운영하시는 분들에 유요한 사이트인 것 같습니다. 많이 활용해 보시기 바랍니다.