'블로깅'에 해당되는 글 2건

  1. Prism을 이용하여 티스토리에 구문 강조(Syntax Highlighting) 기능 적용하기
  2. 게티이미지(Getty Images)의 사진을 블로그에 합법적으로 무료 사용하기

Prism을 이용하여 티스토리에 구문 강조(Syntax Highlighting) 기능 적용하기

IDE에서 제공하는 구문 강조 기능을 블로그에도 적용해보자

우리는 대부분 소스 코드를 작성할 때 IDE에서 제공하는 미려한 화면에서 코드를 작성한다. 하지만 블로깅 또는 위키 문서 작성시 구문 강조(Syntax Highlighting) 기능이 적용되지 않아 가독성이 심각하게 떨어진다. 이번 글에서는 Prism이라는 초경량의 강력한 기능을 가진 구문 강조(Syntax Highlighter) 라이브러리를 이용하여 티스토리 블로깅시 소스 코드에 문법 강조 기능을 적용하는 방법을 설명하고자 한다.

라이브러리 다운로드

  • 여기를 클릭하여 Prism 홈페이지에 접속한 후 DOWNLOAD 버튼을 클릭한다.
  • 테마 및 지원 언어를 커스터마이징하는 화면이 나온다. 테마는 본인의 취향에 따라 고르고 (나는 어두운 계열의 Okadia 테마를 선택했다.) 본인이 자주 포스팅하는 언어를 선택한다.(나는 Java, Bash, C#을 추가 선택했다.)
  • 추가 플러그인 또한 필요에 따라 선택한다.(나는 Line Numbers만 추가했다.)
  • 커스터마이징을 완료하였으면 DOWNLOAD JS, DOWNLOAD CSS 버튼을 차례로 클릭하여 생성된 라이브러리 파일을 다운로드한다. prism.css, prism.js 2개 파일이 다운로드되었다.

티스토리 적용

  • TISTORY 관리 화면으로 이동한다.
  • 꾸미기 > HTML/CSS 편집 > 파일업로드 화면으로 이동하여 앞서 다운로드한 2개 파일을 업로드한다.
  • HTML/CSS 화면으로 이동하여 skin.html 파일에 아래 내용을 추가한다.

    <link href="./prism.css" rel="stylesheet">
    <script src="./prism.js"></script>
  • 글 포스팅시 HTML 코드를 아래와 같이 작성하면 구문 강조 및 라인 출력 기능이 적용된다.

    <pre class="line-numbers">
    <code class="language-markup">
    // 코드 입력
    </code>
    </pre>
    
  • HTML일 경우 클래스명에 language-markup, CSS일 경우 language-css, JavaScript일 경우 language-javascript을 입력한다.


저작자 표시 비영리 동일 조건 변경 허락
신고

게티이미지(Getty Images)의 사진을 블로그에 합법적으로 무료 사용하기

블로그 운영에 있어 외부 사진 사용은 신중함을 필요로 한다.


블로그를 운영하다보면 보다 독자들이 글에 집중할 수 있는 장치로 사진을 사용할 필요가 있다. 하지만 내가 찍은 사진이 아닌 외부의 사진을 사용하려면 저작권 문제 등 걸림돌이 많다. 자칫하면 소송에 휘말릴 수 있어 골치 아픈 문제가 될 수 있다.

 

게티이미지의 이미지를 합법적으로 무료 사용할 수 있다.


이런 블로거들의 고민은 전세계적인 공통 현상이 아니었나 싶다. 최근 게티이미지(Getty Images)에서 이런 블로거들의 요구를 인지했는지 자사가 제공하는 일부 이미지에 대한 embed 기능을 제공하기 시작했다.

embed 기능이 뭐지?


게티이미지의 이미지 공유 개념으로 게티이미지가 제공하는 이미지 중에 embed가 가능한 것에는 </> 아이콘이 표시된다. 이 아이콘을 클릭하면 내 블로그에 이미지를 보여줄 수 있는 HTML 코드를 제공한다. 이 코드를 내 블로그 글에 삽입하면 이미지가 보여진다.

주의할 점은?


반드시 게티이미지가 제공하는 코드를 사용해서 이미지를 게시해야 한다. 다른 방법, 이미지를 복사하여 그대로 사용하는 행위는 인정되지 않는다. HTML 코드 사용이 제한적인 서비스형 블로그에서는 불가능할 수도 있다.

코드를 삽입하면 이미지가 가운데 정렬이 되지 않는데 방법은?


게티이미지가 제공하는 코드를 바로 삽입하면 가운데 정렬이 되지 않는다. 방법은 코드 바깥을 아래와 같이 div 태그로 감싸주면 된다.

 

<div align="center"><iframe...></div>



저작자 표시 비영리 동일 조건 변경 허락
신고