티스토리 에디터 html 코드 넣기

생긴지는 한두달 된 기능인것 같은데, 따로 홍보도 없고 안내도 없어서 이번에 이걸 사용해서 글을 작성한 김에 내용을 소개하려고 한다.

 

티스토리 HTML블럭

티스토리 에디터의 고질적인 단점.

html코드를 수정후 기본모드에서 편집시 일부 코드가 사라진다.

 

처음 봤을때 이걸 방지하려고 만든 기능임을 짐작했다.

 

조금전 작성한 글에서 이 기능을 사용했는데 결과는 아래와 같다.

 

 

 

에디터상의 코드

<figure id="code_1642950967836" data-source="&lt;style&gt;
figure&gt;a[href*=&quot;//www.youtube.com&quot;]:before, figure&gt;a[href*=&quot;//youtube.com&quot;]:before, figure&gt;a[href*=&quot;//youtu.be&quot;]:before{
	position: absolute;
    content: '';
    width: 68px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -24px;
    background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba(33,33,33,.7)'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E&quot;);
}
figure&gt;a[href*=&quot;//www.youtube.com&quot;]:hover:before, figure&gt;a[href*=&quot;//youtu.be&quot;]:hover:before, figure&gt;a[href*=&quot;//youtube.com&quot;]:hover:before{
	background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E&quot;);
}
&lt;/style&gt;" data-ke-type="html">

결과로 출력되는 코드

<style>
figure>a[href*="//www.youtube.com"]:before, figure>a[href*="//youtube.com"]:before, figure>a[href*="//youtu.be"]:before{
	position: absolute;
    content: '';
    width: 68px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba(33,33,33,.7)'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}
figure>a[href*="//www.youtube.com"]:hover:before, figure>a[href*="//youtu.be"]:hover:before, figure>a[href*="//youtube.com"]:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}
</style>

 

 

원리라고 하면 이런것 같다.

1. 에디터가 코드블럭은 안건듦
2. 코드블럭 내에 사용자 입력 html 데이터를 별도로 저장
3. 글을 열람시에는 서버에서 처리되어 html데이터를 그대로 출력

 

이런 기능은 잘 만든것 같다.

https://tistory.hi098123.com/36 이런 글에서의 html 본문 코드 활용을 이젠 좀 더 쉽게 할 수 있겠습니다.