셀디샵

1. 사전작업:  highlight.js 에서 최신버전 확인 후 HTML편집에서 </head> 앞부분에 다음 코드 삽입 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script> <!-- and it's easy to individually load additional languages <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/javascript.min.js"></script> --> <script>hljs.highlightAll();</script> 2. html escape 필요시 여기 에서 코드 변환 3. <pre><code>...</code></pre> 사이에 코드 삽입

한국일보 웹사이트의 뉴스기사에는 신문지면의 중요한 단락에 형광펜 칠하는 듯한 효과를 내는 기능 이 적용되어 있다. 기사를 스크롤해가며 읽으면 strong tag가 적용되어 있는 부분이 화면 가운데 부분을 지나갈 때 형광펜을 칠해 준다. 이 기능을 (한국일보의 허락을 구하지 않고) 셀디샵 블로그에 적용하였다. 적용한 기능을 (역시 한국일보의 허락을 구하지 않고) 여기 공유한다. css .post-body b { background-image: linear-gradient(90deg, transparent 50%, rgba(0, 51, 0, .2) 0); background-position-x: 0px; background-position-y: center; background-size: 200%; transition-behavior: normal; transition-duration: 1s; transition-timing-function: linear; transition-delay: 0s; transition-property: background-position; } .post-body b.on { background-position-x: -100%; } 참고로 blogspot(구글 블로거)에 적용시 HTML편집에서 ]]></b:skin> 의 앞부분에 끼워넣는다. 한국일보의 strong tag를 b tag로 변경하고 형광펜 색상과 투명도도 변경하였다. javacript <script type="text/javascript"> //<![CDATA[ var articleReadability = function() { var t = document.querySelectorAll(".post-body b") , e = new IntersectionObserver(function(t, e) { t.fo...