코드 블로그 포스팅 - kodeu beullogeu poseuting

flrto

검색하기 Search

flrto

• 분류 전체보기 (47)
  • AWS (0)
    • TIL (0)
    • Review (0)
  • C (26)
    • Academy (25)
    • Review (0)
    • ddazua (1)
  • C++ (1)
    • Academy (0)
    • Review (1)
  • DirectX (0)
  • Data Structure, Algorithm (0)
    • TIL (0)
    • Information (0)
  • Unity (16)
    • TIL (8)
    • Review (4)
    • Book (0)
    • Academy (0)
    • Information (4)
  • 기타 정보 (3)
  • 자유 (0)
  • Game (0)
  • Notice (0)
  • MyUnity3D Project (0)
  • 디자인 패턴 (0)

Guestbook

Notice

Recent Posts

• Call by Value Call by Addre⋯
• 마지막 문제
• 문제2 풀이 (인덱스 출력 미완성)
• 파일 입출력

Recent Comments

• 혹시 유니티에서 C#스크립트 생성 후 열면 유니티가 멈⋯
• 소스활용할게용

Link

«   2022/11   »

Tags

• GetAxis()메서드
• C언어
• 반사 벡터
• 두 값 교체하기
• Unity
• 프로젝트 목록 제거
• UnityHub
• Axes
• 기호 상수
• ASCII CODE TABLE
• 극장 예약 프로그램
• 두 수 크기 비교 함수
• round()함수
• Logic Gates
• 논리 게이트
• 소스코드 하이라이팅
• 전처리기 정의
• 유니티
• 난수 값 맞추기 게임
• 키입력값 받기
• time.h
• 미리 컴파일된 헤더 사용안함
• 문자 분류
• 2차원 배열
• AWS Discovery Book
• scanf 오류
• 배열 사용X
• C 언어
• 유니티허브
• 개인 정리

more

Archives

• 2019/08 (1)
• 2019/07 (2)
• 2019/06 (27)
• 2019/05 (17)

Today18Total24,804

관리 메뉴

• 글쓰기
• 방명록
• RSS
• 관리

flrto

블로그 소스 코드 포스팅시 에디터처럼(라인 넘버 등) 보이게 하기 본문

기타 정보

블로그 소스 코드 포스팅시 에디터처럼(라인 넘버 등) 보이게 하기

갈릭새우칩 2019. 5. 24. 04:06

https://colorscripter.com/

Color Scripter

Simple & Flexible Syntax HighLighter

colorscripter.com

블로그에서 소스 코드 포스팅시 에디터에서 작성 한것처럼 라인넘버도 보이고 코드 하이라이트가 적용된것을 포스팅 하려 할때 사용하면 유용한 사이트이다. 

매우 직관적이라 따로 사용법을 설명할 필요는 없을듯 하고 확장스토어에서 커스텀이 가능하기도 한듯 하다.

'기타 정보' 카테고리의 다른 글

Tagcolor scripter, Syntax Highlighter, 소스코드 하이라이팅

'기타 정보' Related Articles

• 스프라이트 자료 사이트 2019.05.26
• 
  다양한 슬라이드 자료를 얻을수 있는곳 슬라이드셰어(slideshare) 2019.05.19

more

0 Comments

이름 비밀번호

Secret

내용

Blog is powered by kakao / Designed by Tistory

티스토리에서 코드와 관련된 포스팅을 올리면서

왜 내껀 다른 블로그와 다를까 하는 궁금증이 남았다.

내 포스팅에 코드도 요렇게 예쁘게 나왔으면 좋겠는데...

그래서 가져왔다. 티스토리 블로그에 코드블럭 예쁘게 출력하는 방법!

아주 쉽다. 아래 스텝을 따라하며 5분 컷으로 끝내버리자. 

1. 티스토리에 코드 입력하는 방법 (이미 했다면 스킵 가능)

기본적으로 티스토리 블로그에서 코드를 예쁘게 만들 수 있는 코드블럭을 제공한다.

설정하는 방법을 하나씩 따라해 보시라.

먼저 요약부터.

1번 요약
블로그 설정 > 플러그인 > syntax 검색 > Syntax Highlight 플러그인 활성화 >
글쓰기 > 더보기 > 코드블럭 > 코드입력 > 끝.

먼저 블로그 설정 > 플러그인 >

검색창에 “syntax” 입력

해당 플러그인을 활성화 하자.

그러면 글쓰기에서 아래와 같이 코드 입력창이 활성화 된 것을 볼 수 있다.

코드블럭을 클릭하면 아래와 같은 입력창이 나오는데, 거기에 코드를 복붙 하자.

아래와 같이 내 글에 코드블럭이 입력 되었다.

2. 예쁘게 출력하는 방법 : highlight.js 입히기

늘 그렇듯이, 요즘 세상엔 내가 원하는 건 누군가가 자아알 만들어 놓았다.

아주 간단하게 내 블로그 html에 몇 줄 추가하는 것으로 내 코드블럭을 예쁘게 만들 수 있으니 아래를 따라해보자.

highlight.js 사이트로 이동하자.  링크 → https://highlightjs.org/

페이지에서   Get version 10.6.0  을 클릭하자. 다운로드 받는건 아니다.

들어가면 다음과 같은 화면이 나올 것이다.

여기에서 첫번째 녀석을 HTML에 갖다 붙이면 된다.

하지만!!! 아직 붙이지 마시라. 그 전에 할 일이 하나 더 있다.

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

내 취향에 맞는 테마를 골라야 한다.

아래 링크에 들어가면 언어별 테마들의 데모를 보여준다.

내가 주로 사용할 언어를 선택하고, Themes를 살펴보자.

highlightjs.org/static/demo/

highlight.js demo

highlightjs.org

예쁜 녀석들이 아주 많다.

나는 paraiso dark 테마를 골랐다. 

이제 할일은,

위에서 붙이려고 했던 html 코드를 살짝만 수정해주면 된다.

두번째 줄의 default.min.css 의 default를 내가 원하는 테마로 바꿔주면 된다.

Paraiso Dark 테마를 골랐다면 빈공간을 대쉬('-') 로 채워주고 --> paraiso-dark

대소문자 구분은 상관없다.

default를 지우고 선택한 테마를 입력한다. 여기서 min.css는 건드리지 않는다.

BEFORE

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

AFTER

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/paraiso-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

자 여기까지 했으면 거의 다 됐다.

이걸 우리 티스토리 블로그에 얹이자. 

우리 블로그의 html의 head 안에 집어넣으면 끝이다.

블로그 관리 > 스킨 편집 > html 편집 > </head> 위에 복붙 하고 > 적용 클릭!

요렇게 </head> 위에 바로 얹어주자.

3. 완성

그리고 글쓰기로 돌아와서 코드블럭을 입력해보자. 

단, 입력 시 입력할 언어를 고르는걸 잊지말자.

한번 선택해 두면 기본으로 설정 되는 듯 하니 즐겨쓰는 언어가 있다면 매번 고를 필요는 없다.

결과물

def GuGu(n):
    result = []
    i = 1
    while i < 10:
        result.append(n * i)
        i = i + 1
    return result

참 쉽죠?

이쁜 코드블럭을 골라 잘 활용하긴 바란다.

끝~~