티스토리, 네이버 블로그에 html 소스코드 넣기, 포스팅 하는 방법- Color Scripter

티스토리, 네이버 블로그에 html 소스코드 넣기, 포스팅 하는 방법- Color Scripter

블로그에 코드를 넣고 포스팅 하는 분들이 종종 있습니다. 일반적으로 테이블하나 생성하고 그 안에 소스코드를 넣어서 안내하고 있는데요. Visual Studio 처럼 이쁘게 소스코드에 스타일을 적용해서 가독성이 좋도록 해서 적용할 수 있습니다.

언어를 자동으로 인식해서 사용하기도 편리하고, 스타일을 선택할수 있으며, 클립보드로 쉽게 복사할 수 있는 장점이 있습니다.

방법은 상당히 간단한데요. 프로그램을 설치하는 방식이 아니기 때문에 티스토리나 네이버 블로그에 모두 적용할 수 있습니다.

 

코드에 스타일을 적용하기 위해 Color Scripter(여기)를 클릭해서 사이트에 접속합니다.

사이트가 열리면 코드를 입력하는곳이 바로 보이는데요. 빈곳에 코드를 복사해서 붙여넣기 합니다.

---

 

코드를 붙여넣기 되면 기본 스타일로 적용되는데요. 세부설정 버튼을 클릭합니다.

---

 

세부설정 창이 뜨면 HTML태그 자체 복사에 체크 합니다.

저장 버튼을 클릭해서 창을 닫아주세요.

---

 

스타일을 선택합니다. 총 3가지 스타일을 제공하고 있는데요. 기본, 핑크 레몬에이드, 서브라임 블랙이 있습니다. 저는 서브라임 블랙이 마음에 드네요.

---

 

스타일을 선택하면 해당 스타일에 코드와 배경까지 모두 적용됩니다.

하단에 보시면 버튼 3가지가 있습니다.

HTML로 복사를 클릭하시거나 클립보드에 복사버튼을 클릭합니다.

---

 

HTML 복사를 클릭하면 코드가 안내창으로 나와서 Ctrl + C 키를 눌러 복사를 합니다.

클립보드에 복사를 하면 HTML코드가 자동 복사됩니다.

단 상위에서 안내해드렸던 세부 설저에 HTML 태그 자체복사에 체크하셔야 합니다.

---

 

네이버 또는 티스토리 글쓰기 페이지로 이동합니다.

글쓰기에서 HTML모드로 변경합니다.

이제 복사된 코드를 붙여넣기 해주세요.

---

 

일반 모드로 다시 변환하거나 미리보기를 하시면 스타일이 적용된 코드를 확인하실 수 있습니다.

---

 

아래 적용한 코드 입니다. 

   /// <summary>
    /// Window3.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class Window3 : System.Windows.Window
    {
        public Window3()
        {
            InitializeComponent();
        }
    }