코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh

제가 여러분께 보여드릴 코드가 있습니다.

아래에 그 코드를 공유하니 한번 봐주시기 바랍니다.

 

 

const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)

const unfold = (f, seed) => {
  const go = (f, seed, acc) => {
    const res = f(seed)
    return res ? go(f, res[1], acc.concat([res[0]])) : acc
  }
  return go(f, seed, [])
}

 

 

---

 

블로그에 이렇게 코드를 공유하니 어떤 생각이 드나요?

보기 힘들다고 생각이 들지 않으신가요?

 

개발자라면 늘 IDE 또는 에디터에서 문법에 따라 여러 색으로 입혀져 나온 코드를 봅니다.

그렇게 보여지는 코드는 가독성이 높아서 읽기가 좋습니다.

그런데 아무런 데코레이션도 없는 코드를 보면 읽기가 싫어지겠죠.

 

그럴 때 보통 https://colorscripter.com/ 와 같은 툴을 사용하곤 합니다.

하지만 가끔 블로그 또는 PPT에서 코드를 공유할 때, colorscripter를 사용하는 것은 불편할 때가 많습니다.

 

가끔은 스크린샷으로 찍어 공유하는 것이 낫다고 생각할 때,

이 툴을 사용하면 좋습니다.

 

https://carbon.now.sh/

Carbon | Create and share beautiful images of your source code

 

carbon 으로 뽑은 코드 이미지

위의 코드를 carbon으로 변형해서 이미지로 출력한 결과입니다.

 

 

 

툴 사용법

carbon에 접속하면 아래와 같은 화면이 나옵니다.

carbon 화면

테마 설정

테마 설정 드롭다운

carbon에는 많고 다양한 테마들을 지원합니다. 그중 인기 있는 Monokai 테마도 있습니다.

드라큘라 Pro 같은 테마는 옆에 "Purchase" 뱃지가 있는데, 유료라서 돈을 지불해서 사용할 수 있습니다.

 

지원 언어

carbon 지원 언어들

carbon에는 다양한 언어를 지원합니다.

지원하는 언어는 아래와 같습니다.

 

Apache / Plain Text / C / C++ / C# / Clojure / COBOL / Crystal / CSS / D / Dart / Diff / Django / Docker / Elixir / Elm / Erlang / F# / Fortran / Gherkin / GraphQL / Go / Groovy / Handlebars / Haskell / HTML / XML / Java / JavaScript / JSON / JSX / Julia / Kotlin / LaTeX / Lisp / Lua / Markdown / MySQL / N-Triples / NGINX / Nim / Objective / C / OCaml / Pascal / Perl / PHP / PowerShell / Protocol / Buffer / Python / R / RISC-V / Ruby / Rust / Sass / Scala / Smalltalk / Solidity / SPARQL / SQL / Stylus / Swift / TCL / TOML / Turtle / TypeScript / TSX / Twig / VB.NET / Verilog / VHDL / Vue / XQuery / YAML

 

배경색 선택

배경색 선택

바깥 배경색도 지정할 수 있습니다.

배경색뿐만 아니라 이미지도 배경으로 넣을 수 있어서, 원하는 이미지를 넣거나 카피라이트 같은 문구도 배경에 넣을 수도 있을 것 같습니다.

배경이 이미지를 넣은 모습

 

환경 설정

carbon 환경설정

carbon은 생각보다 다양한 기능을 지원하고 있습니다.

기본적으로 프리셋을 지원하면서, 윈도우 모양, 배경 패딩 크기, 뒷 그림자, 에디터 글꼴, 글꼴 사이즈, 워터마크 등등

다양한 기능을 제공하고 있습니다. 입맛대로 사용하시면 되겠습니다.

 

다양한 클립보드 복사 기능

클립보드 복사 기능

클립보드에 이미지뿐만 아니라, iframe이나 url도 함께 지원합니다.

만약 medium을 사용하신다고 하면 medium을 위한 전용 기능도 있습니다.

 

트위터 공유

트위터 공유 기능

Export 기능

carbon Export

carbon에서 이미지를 내보낼 때, PNG 또는 SVG 파일 형식으로 내보낼 수 있습니다.

Open을 누르면 새 탭에서 이미지를 열 수 있습니다.

편집창에서 보이는 이미지보다 더 큰 이미지가 필요하면 최대 4배까지 늘려서 다운로드할 수 있습니다.

 

 

단축키

설정 메뉴 열기	⌘ /
PNG로 내보내기	⇧ ⌘ E
SVG로 내보내기	⇧ ⌘ S
스니펫 저장	⌥ S
클립보드에 이미지 복사	⇧ ⌘ C
설정 재설정	⇧ ⌘ \

 

참고

carbon 깃허브

https://github.com/carbon-app/carbon

GitHub - carbon-app/carbon: Create and share beautiful images of your source code