19. Notion, 개발자의 친구

소스 코드를 담는 코드(Code) 블록

코드 블록은 이렇게 생겼다.

• 텍스트에 서식이 적용되지 않는다.
웹 페이지나 다른 곳에서 내용을 복사한 다음 Notion에 붙여넣으면 서식을 유지한 상태에서 복사된다. 하지만 코드 블록 안에 복사하면 서식이 제거된 일반 텍스트 형태로 복사된다.
실제로 굉장히 큰 용량(1MB 정도?)의 텍스트 파일을 열어서 그걸 복사한 다음에 노션에 붙여보면 동작이 굉장히 느릴 수 있지만 코드 블록을 생성하고 이 안에 텍스트를 붙이면 굉장히 빠릿빠릿하게 돌아간다. 이는 코드 블록이 순수한 텍스트 데이터만 저장하고 처리하기 때문이다.
그런데 신기한 일이 발생했다. 언젠가부터 코드 불록에도 간단한 서식 적용이 가능하다.

처음에 내가 이걸 보고 얼마나 놀랐겠는지 생각해 보시라.
아니, 이게 이렇게 되면 '수동 문법 강조 기능' 갈은 걸 만들고 싶잖아????

• 문법 강조 기능을 지원한다.
코드 블록의 오른쪽 하단 왼쪽 위에 문법 강조에 사용할 언어를 지정하는 부분이 있다. 아무스 커서를 코드 블록 위에 놓으면 어떤 언어로 문법 강조를 하는지 확인할 수 있다. (모바일 환경에서는 현재 문법 강조 대상 언어가 언제나 표시되어 있다)

#include <stdio.h>

int main(void)
{
	println("Hello, world!\n");
}

널리 쓰이는 언어는 물론이고...

-- 피보나치 수열은 끝없이 열거되어 리스트의 원소가 된다.
fib = 1:1:[ a+b |(a,b) <- zip fib (tail fib)]

굉장히 마니악한 언어까지 지원한다.

• 고정폭 글꼴을 사용한다.
프로그램의 코드를 담는 목적으로 사용되기 때문에 어쩌면 이는 당연한 것인지도 모른다. 일반적인 글을 쓰고 읽을 때는 가변폭 글꼴이 편하지만 아무래도 코드를 다룰 때는 고정폭 글꼴이 훨씬 눈에 잘 들어온다. 아래 예를 보면 코드 블록이 얼마나 가독성이 좋은지 바로 느낄 수 있을 것이다.
#include <stdio.h> int main(void) { println("Hello, world!\n"); }
 
#include <stdio.h>

int main(void)
{
	println("Hello, world!\n");
}
 

외부 코드 저장소 불러오기

Gist : git에 올려놓고 함께 쓰는 코드 조각

CodePen : 앞단을 위한 HTML, CSS, JavaScript 편집기

CodePen은

HTML,

CSS,

JavaScript 를 편집하고 테스트해볼 수 있는 환경이다. 최근 노션에서 CodePen을 노션 페이지에 포함하는 기능을 지원하기 시작했으므로 이 사이트를 사용하는 분들은 훨씬 편리한 환경으로 사용하실 수 있겠다.

CodePen에서 새로운 Pen을 생성하고 코드를 입력한 다음 노션에서 /codepen을 입력하고 엔터를 누르면 CodePen의 URL을 입력할 수 있다. 아래는 필자가 만들어본 정말 간단한 Pen이다. 포함시키면 이렇게 노션에서 바로 결과를 확인할 수 있다.

 

⛅

아직

구름 에듀 에서는 노션 임베드를 지원하지 않아서 아쉬움이 크다. 하지만 조만간 노션에서 API를 공개하고 요청이 많으면 분명 노션과도 좋은 콜라보가 되지 않을까 기대해본다.

Notion의 무한 확장 - embed 블록

Apption : 확장의 끝판왕 - https://apption.co

무제한 파일 첨부

흩어진 참조를 한데 모아주는 백링크

백링크란 현재 페이지를 참조하는 페이지를 역으로 찾아갈 수 있는 역참조 기능이다. 백링크가 궁금하면

C 페이지로 잠시 가 보시라.

보시다시피

C 페이지를 참조하는 모든 페이지의 백링크를 볼 수 있다. (지금 이 페이지도

C 를 참조하고 있으므로 당연히 백링크에서 확인할 수 있다.) 더구나 공개 페이지에서는 비공개 개인 페이지의 백링크는 숨겨주기 때문에 보안성도 매우 뛰어나다.

뭘 좋아할지 몰라서 다 준비했어!