구글 블로그에 복사 버튼이 있는 코드 블록을 만들어보자.

개발자의 블로그에는 코드 블록이 필수입니다.
하지만 구글 블로그의 에디터에는 코드 블록 기능을 제공하지 않습니다.
그래서 구글 블로그에서는 코드 블록을 쓸 수 없느냐.. 하면 그건 아닙니다.
HTML, CSS, JavaScript를 할 줄 알면 구글 블로그에서는 타 플랫폼의 블로그보다 더욱 더 할 수 있는 것이 많습니다.
지금부터 코드 블록을 만들어보겠습니다.
참고로 이번에 만드는 것은 꼭 MAGPRO 스킨이 아니어도 가능합니다.

지난 포스트

구글 블로그에서 a 태그 링크를 박스 형태로 예쁘게 만드는 방법

구글 블로그에서 a 태그 링크를 박스 형태로 만드는 방법을 알아보겠습니다. 참고로 템플릿 MAGPRO 스킨을 사용하고 있습니다.

스킨에 저장할 소스 코드

저는 HTML 편집을 들어가서 거의 마지막쯤에 이 코드를 붙여 넣었습니다.
위의 코드를 스킨에 저장하는 것으로 아래와 같은 코드 블록을 만들 수 있습니다.
아래의 코드를 복사 버튼을 클릭해서 스킨에 붙여 넣고 저장하세요.

스킨에 저장할 소스 코드

<!-- Code Editor --> 
<style>
.K2_CBox{position:relative;background:#FFC0D3;border-radius:6px;box-shadow:0 0 20px rgb(0 0 0 / 10%);padding:10px;margin:30px 0 30px}
.K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.K2_CBox .CB_Heading span{margin-left:10px;font-weight:700;font-family:inherit;font-size:1.1rem}
.K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:var(--main-color);transition:all .3s ease;-webkit-transition:all .3s ease}
.K2_CBox .C_box_main:hover{background:var(--button-hover-bg);}
.K2_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect height='16.45385' rx='4' width='16.45385' x='5.54615' y='5.54615'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>&quot;);background-size:cover;background-repeat:no-repeat;background-position:center}
.K2_CBox .C_box_main.copied{background:var(--footer-bg)}
.K2_CBox .C_box_main.copied .CBox_icn{background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>&quot;)}
.K2_CBox pre{width:auto;margin:0;background:var(--footer-bg);padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:Consolas, &#39;Noto Sans Demilight&#39;, monospace;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;}
.K2_CBox pre::before, .K2_CBox pre::after{content:&#39;&#39;}
.K2_CBox &gt; div &gt; pre &gt; ol &gt; li{list-style:decimal outside;border-left:1px solid var(--submenu-bg);margin:0 0 0 20px;padding-left:13px;}
.dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc}
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:var(--menu-bg);color:var(--main-color);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
</style>
<div class='tNtf' id='toastNotif'/> 
<script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy'/>

코드가 너무 길어서 엔터를 거의 치지 않고 가로로 길게 작성해서 코드 블록 상에서 가독성이 좋지는 않지만 일단 이것으로 코드 블록을 사용할 수 있는 블로그가 됐습니다.
이 코드에서 마지막 줄의 가장 끝에 있는 doxy라는 값을 다른 값으로 바꾸면 코드 블록의 코드 색상이 바뀌게 됩니다.
doxy 이외의 다른 값으로는 desert, sunburst, sons-of-obsidian이 있습니다.

코드 블록을 사용할 때 붙여 넣을 코드

에디터에 넣을 코드

<!--[ Code Box 1 ]-->
<div class="K2_CBox">
    <div class="CB_Heading">
        <span>언어 or 파일명</span>
        <button class="C_box_main" id="copy1" onclick="copyC('copy1','code1')">
            <i class="CBox_icn"></i>
        </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id="code1">
        <pre class="prettyprint linenums">코드 들어갈 곳
        </pre>
    </div>
</div>

포스트 안에 소스 코드를 넣을 때에는 이 코드를 에디터에 붙여 넣으시면 됩니다.
참고로 한 포스트 안에서 2개 이상의 코드 블록을 사용할 때에는 2번째 코드부터는 값을 변경해줘야 하는데요,
5번째 줄과 11번째 줄의 copy1 두 개와 code1 두 개, 총 네 개의 숫자를 2로 바꿔줘야 합니다.
세번째 코드 블록을 넣을 때에는 당연히 3으로 바꿔줘야 하고요.

그리고 12번째 줄의 linenums에 linenums:12, 이런 식으로 숫자값을 넣어주면 코드 블록의 첫번째 줄의 숫자가 입력한 숫자값으로 바뀌게 됩니다.
상황에 따라서는 정말 자주 유용하게 사용할만한 기능입니다.

코드가 들어갈 자리에 코드를 넣을 때에는 당연히 꺽쇠 <>를 태그로 인식하지 않는 특수문자로 변경을 해서 넣어줘야 합니다.
참 귀찮죠?

그나마 다행인 것은 그걸 대신 해주는 사이트가 있습니다.
다음 포스트에서는 그 사이트를 소개해드리겠습니다.

소스 코드의 특수 기호를 엔티티 문자로 변경해주는 사이트, TRICKS OF IT

소스 코드의 특수 기호를 엔티티 문자로 변경해주는 사이트, TRICKS OF IT을 소개하겠습니다.