[꿀팁] 블로그 개발 관련글 작성 시 소스 코드 삽입하는 방법 (ColorScripter)

웹사이트 중 Color Scripter라는 웹 페이지가 있다.

이 웹사이트는 개발 관련 글이나 소스코드를 작성하여 보여줄 때, 매우 유용한 기능을 제공한다.

해당 시스템의 링크다

colorscripter.com/

Color Scripter

사용방법은 다음과 같다.

1. 포스팅하고 싶은 소스코드를 복사하자

 

나는 여기 보이는 c:forEach 문을 블로그에 포스팅하고 싶다.

먼저 소스코드를 복사한 후,

 

위의 링크 페이지에 접속한다.

접속 후에 내가 복사한 소스코드를 붙여넣기 한다.

그러면 ColorScripter에서 자동으로 언어를 판별하여 셋팅을 해준다.

그리고 하단에 보이는 'HTML로 복사' 버튼을 클릭한다.

 

 

그러면 해당 팝업이 나오는데, 여기 적혀있는 문구를 복사한다.

 

복사한 후, 다시 블로그로 돌아와서 포스팅 중인 글의 모드를 HTML모드로 변경한다.

그러면 화면이 HTML 태그로 된 화면으로 변환되는데, 여기에 아까 복사한 ColorScripter코드를 붙여넣기한다.

 

빨간 박스가 ColorScripter에서 제공한 html 코드를 붙여넣기 한 것이다.

그러면 내가 작성하고 있는 글에, 소스코드가 정상적으로 들어간 것이다.

 

결과물 :

 <c:forEach var="row" items="${result}" varStatus="status">
                     <c:choose>
                        <c:when test="${not empty row.bd_password}">
                            <tr>
                                 <td>${row.sid}</td>
                                <td colspan="2">Secret Board&nbsp;&nbsp;&nbsp;
                                    <input style="width:100px;display:inline;" type="password" name="check_pw" class="form-control check_pw"/>
                                    <input type="button" class="btn check_pw_btn" value="VIEW"/>
                                </td>
                                <td>${row.writer}</td>
                                <td>${row.reply_cnt}</td>
                                <td>${row.creat_dt}</td>
                                <td>${row.view_cnt}</td>
                            </tr>
                          </c:when>
                          <c:otherwise>
                            <tr>
                                <td>${row.sid}</td>
                                <td class="view" style="cursor:pointer;">${row.title}</td>
                                <td>${row.content}</td>
                                <td>${row.writer}</td>
                                <td>${row.reply_cnt}</td>
                                <td>${row.creat_dt}</td>
                                <td>${row.view_cnt}</td>
                            </tr>
                        </c:otherwise>
                    </c:choose>
                  </c:forEach>