夢∞夢

코드블럭 언어 자동 표기

<head>
    <!--코드블럭 언어 표시-->
    <script>
        jQuery(function($) {
            $("pre").each(function(){
                var datLang = $(this).attr('data-ke-language');
                var datLangDir = '<div class=codeLang>' + datLang + '</div>'
                $(this).before(datLangDir);
            })
        })
    </script>
</head>

.codeLang {margin: 10px 0 0; padding: 2px 15px;
    line-height: 1.1; text-align: right;
    background: rgb(39, 40, 34, 0.9); color: #fff;
    }

코드블럭 줄간격, 줄바꿈, 여백 설정

pre {margin: 0 0 10px; width: 100%;
    line-height: 1.3;
    /* 줄바꿈 설정 (가로스크롤 x) */
    overflow:hidden;
    word-break:break-all;
    word-break:break-word;
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */}

/* 여백설정 */
pre .hljs {padding: 12px 25px;}

이 글의 첫 번째 스크립트를 쓰지 않는다면 상단여백도 설정해줄 것.

코드블럭 컬러: syntax highlight 플러그인 - monokai

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바