소스코드 깔끔하게 표현하기 [Color Scripter]

웹상에서 소스 코드를 올릴 때 그냥 올리게 되면 보는 이는 알아보기 힘들어 혼란이 올 수도 있고 전달하고 자 하는 내용이 전달되지 않을 수도 있습니다.

소스코드 깔끔하게 표현하기 [Color Scripter]

Color Scripter 사이트에서는 소스 코드를 깔끔하고 가독성 높은 코드를 표현할 수 있게 도와줍니다.

유튜브 동영상 코드를 가져와서 넣었는데 반응을 하지 않습니다. 기본 자동으로 언어를 인식하는데 TEXT 문서로 인식을 하고 있습니다.

이럴 때는 자동 설정을 수동으로 그에 맞는 종류를 선택해 줍니다.

수동으로 적용을 하니 규칙에 맞게 잘 적용이 되었습니다.

자바 스크립트를 입력했더니 한방에 자동으로 인식을 하여 정돈합니다. 위 HTML 소스는 내용이 너무 짧아서였을까요... 결과물을 오른쪽 하단에 클립보드에 복사를 선택하고 게시할 곳에서 붙여넣기 하여줍니다. 

복사는 꼭 '클립보드에 복사' 버튼을 이용하여야 줄번호와 배경까지 가져옵니다.

처음 사용하면 플래시 어쩌고 하면서 허용하라는 메시지가 뜨면서 내용이 다 지워질 수 있습니다. 내용을 다시 넣어주고 진행하면 됩니다.

<script type=text/javascript>
$(document).ready(function(){
        
    $(".return-top").hide(); // 탑 버튼 숨김
    $(function () {
                 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
                $('.return-top').fadeIn();
            } else {
                $('.return-top').fadeOut();
            }
        });
                
        $('.return-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);  // 탑 이동 스크롤 속도
            return false;
        });
    });
 
});
</script>
 
<a class="return-top" href="#" style="right:15px; bottom:15px; position:fixed; z-index:9999;">[RETURN TOP]</a>
 

기본설정으로 적용한 결과로서 컬러로 구분이 되어 가독성을 높여주지만 더 높은 가독성을 위해 배경을 이중색으로 하는것을 권장합니다.

배경에서 이중색상을 선택하면 줄구분이 확실해 가독성을 높여 줍니다.

<script type=text/javascript>
$(document).ready(function(){
        
    $(".return-top").hide(); // 탑 버튼 숨김
    $(function () {
                 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
                $('.return-top').fadeIn();
            } else {
                $('.return-top').fadeOut();
            }
        });
                
        $('.return-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);  // 탑 이동 스크롤 속도
            return false;
        });
    });
 
});
</script>
 
<a class="return-top" href="#" style="right:15px; bottom:15px; position:fixed; z-index:9999;">[RETURN TOP]</a>
 

핑크 레몬에이드 적용에 이중 배경 적용한 결과물입니다.

<script type=text/javascript>
$(document).ready(function(){
        
    $(".return-top").hide(); // 탑 버튼 숨김
    $(function () {
                 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
                $('.return-top').fadeIn();
            } else {
                $('.return-top').fadeOut();
            }
        });
                
        $('.return-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);  // 탑 이동 스크롤 속도
            return false;
        });
    });
 
});
</script>
 
<a class="return-top" href="#" style="right:15px; bottom:15px; position:fixed; z-index:9999;">[RETURN TOP]</a>
 

서브라임 블랙에 이중 배경입니다. 이 녀석이 가장 깔끔하게 잘 표현된 것 같네요.

별도로 자바스크립트 등을 설치하지 않고도 웹상에서 간단하게 적용 가능하니 소스 코드 올릴 때 매우 추천드리는 도구입니다.

https://colorscripter.com/