구글블로그 html코드 본문에 삽입하여 방문자에게 보여주는 방법

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

 

코드를 소개하고 싶은데요

티스토리는 별도의 코드를 삽입하는 에디터의 메뉴가 있어서 클릭하고 코드를 넣으면 바로 반영되지만 구글블로그는 코드를 본문에 삽입하여 글읽기시에 본문에서 코드를 확인하거나 복사하여 다른곳에 응용할 수 있게 해주는 메뉴가 없어서 불편합니다. 그렇다면 어떻게 해야 본문에 html, css, java script등을 보기 좋게 넣을 수 있을까요? 아래의 글에서 그 방법을 공개합니다.

코드넣고 복사하면 끝

자체적으로 html코드등을 보여지게 만드는 코드도 있지만 일일이 이걸 적용하려면 그것도 만만치않은 인력낭비 시간낭비이기에 이런 어려움을 도와주는 사이트를 활용해 이용하면 쉽고 멋지게 블로그글에 코드를 삽입할 수 있습니다.

그 사이트는 바로 Color Scripter입니다. 먼저 사이트 이동을 위해 아래의 링크버튼을 클릭하여 홈페이지로 가주세요.

Color Scripter 바로가기

이 사이트는 뭐 별도로 공부할 필요도 없습니다. 사이트 자체가 직관적으로 누구나 쉽게 코드를 얻을 수 있게 되어있어서 만족도가 높은 사이트입니다. 그냥 원하는대로 설정만 해주면 쉽게 본문삽입을 위한 코드를 얻을 수 있습니다. 우리는 그저 복사하여 붙여넣기만 하면 되죠.

Color Scripter는 어떤 사이트인가요?

Color Scripter는 개발자와 블로거들이 코드를 보기 좋게 표현할 수 있도록 도와주는 강력한 구문 강조(syntax highlighting) 도구입니다. 블로그나 웹사이트에 코드를 게시할 때 가독성을 높여주는 이 도구의 주요 기능과 메뉴를 소개합니다.

Color Scripter는 HTML, CSS, JavaScript 등 다양한 프로그래밍 언어를 지원하며, 코드를 입력하면 자동으로 해당 언어에 맞는 구문 강조가 적용됩니다. 스타일 패키지로는 기본 스타일, 핑크 레몬에이드, 서브라임 블랙 세 가지 옵션을 제공하여 취향에 맞는 색상 조합으로 코드를 더 보기 좋게 표현할 수 있습니다.

코드 배경 설정은 단일 색상 배경, 이중 색상 배경(격자 배경), 배경 없음(투명) 중에서 선택할 수 있어 블로그 디자인과의 조화를 고려할 수 있습니다. 세부 설정에서는 글꼴 선택, 줄 간격 조정, 줄 번호 표시/숨김, 줄 번호 시작 숫자 설정, 반환 태그 종류 설정, 탭을 공백 4개로 변환, HTML 태그 자체 복사 기능, 가로/세로 크기 제한 설정 등 다양한 옵션을 제공합니다.

확장 스토어를 통해 새로운 언어팩이나 추가 스타일 패키지를 선택하여 적용할 수 있어 더욱 다양한 코드 표현이 가능합니다. Color Scripter를 사용하면 블로그에 게시하는 코드의 가독성을 크게 향상시킬 수 있으며, 프로그래밍 관련 포스팅을 작성할 때 내용에 맞는 적절한 스타일을 선택하고 다양한 설정 옵션을 실험해보면 자신의 블로그에 가장 적합한 코드 표현 방식을 찾을 수 있을 것입니다.

실제로 사용해보기

그렇다면 실제로 이 사이트를 사용해서 내가 블로그에 올리고 싶은 코드를 어떻게 보여지는지 확인해봅시다. 저는 블로그의 본문글에 들어가는 이미지를 모두 모서리 라운드형태로 변경해주는 CSS코드를 예제로 들어서 설명해보려고 합니다.

1. Color Scripter 사이트에 아래의 캡처이미지처럼 코드를 입력하였습니다.

2. 언어는 자동으로 작동하여 넣은 코드가 자동으로 맞춰집니다. 저는 이미지라운드효과처리를 위한 css코드를 넣었더니 자동으로 css로 언어가 선택되어졌습니다.

3. 코드의 글자색상과 바탕색상을 정의할 수 있는 스타일패키지도 선택이 가능합니다.

4. 배경은 단일색상, 이중색상(격배경), 배경없음(투명)으로 선택가능합니다.

5. 세부설정은 글꼴, 줄간격, 줄번호복사, 줄번호 시작숫자, 반환태그종류설정, 가로크기제한설정, 세로크기제한설정등을 내가 원하는대로 설정해볼 수 있습니다.

6. 이렇게 모두 내가 원하는대로 설정하였다면 우측하단에 있는 HTML로 복사버튼을 눌러서 본문에 넣을 코드를 복사할 수 있습니다.

아래 캡처이미지처럼 복사가 가능한 창이 뜹니다. Ctrl+C눌러서 복사해줍니다.

실제로 본문에 넣은 코드는 어떻게 보일까?

이제 이렇게 설정한 코드를 본문에 삽입하면 어떤모습으로 보여질지 궁금하시죠? 아래에 그 코드를 직접 삽입하여 보여드립니다.

1 2

/*구글블로그 본문 이미지 라운드효과 */ .post-body img{border-radius:10px; max-width:100%; height:auto; pointer-events: none}

cs

위의 코드가 보이시나요? 그렇다면 제대로 된것입니다. 이제 여러분들도 이런 방법을 통해서 구글블로그의 본문에 원하는 코드를 삽입하여 보여주고 방문자가 필요에 의해서 복사할 수 있게 만들어주는 기능을 익혔습니다.

글의 댓글로 서로 의견을 나누고 공유할 수 있습니다. 궁금한점이나 더 나은 기능과 팁을 알고있다면 댓글로 말씀해주세요.

이 글의 카테고리: 추천유틸도구