소스코드를 블로그에 올릴때

이예서·2020년 12월 12일
285
post-thumbnail

💡 코드를 텍스트로 삽입하기

📌Color Scriper

https://colorscripter.com/
간단하게 웹에서 복사 붙여넣기로 만들 수 있다.
코드 하이라이트를 지원하는 것이 특징이다.
블로그 배경색에 어울리는 적절한 스타일을 선택할 수 있다.
(Velog에서는 잘 사용하지 않는다.)

📌GitHub Gist

https://gist.github.com/
내 코드를 모아서 관리할 수 있다는 점이 장점.
깃허브 아이디가 필요하다.
velog에서는 불가능하다.

📌Velog에서는? 코드블럭

백틱 3개 ```로 코드를 감싸면 된다. 여러 언어로 설정도 가능하다.

👉 예시

```java
public class HelloWorld {
public void main(String[] args) { 
	System.out.println("Hello World");
    }
}
```

👉 결과

public class HelloWorld {
    public void main(String[] args) {
        System.out.println("Hello World");
    }
}

💡 코드를 이미지로 변환하여 삽입하기

📌 Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode
VScode에서 사용 가능한 플러그인이다.
마우스 드래그만으로 만들 수 있고, 코드 작업 도중에 따로 창을 열지 않아도 바로 만들 수 있다.
polacode

📌 Carbon

https://carbon.now.sh/

👉간편하다.
간단하게 웹에서 복사 붙여넣기로 만들 수 있다.
VScode에서도 carbon-now-sh 라는 이름으로 지원한다.
배경색을 바꿀 때도 배경색에 맞는 폰트와 글자색을 가진 프리셋을 지원한다.

👉이쁘다.
스타일이 다양하고, 커스터마이징을 지원한다.
(패딩, 그림자 효과, 윈도우 모양, 사이즈 등의 디자인과 폰트, 줄간격, 줄번호 등의 가독성과 관련된 부분까지 모두 지원한다.)

Carboncarbon 예시기본적으로 지원하는 디자인 예시를 그대로 활용하였다.

carbon 커스터마이징 예시간략하게 어떤 기능이 있는지 보여주기 위해 커스터마이징을 해보았다. 윈도우 창 디자인을 바꾸고, 가로길이를 늘리고 세로길이를 줄였다. 그림자 효과를 추가하였고, 줄간격을 늘리고, 줄 번호를 부여하였다.

profile
https://ohge.tistory.com/

23개의 댓글

comment-user-thumbnail
2020년 12월 12일

👏🏻👏🏻

답글 달기
comment-user-thumbnail
2020년 12월 16일

감사합니다 :)

답글 달기
comment-user-thumbnail
2020년 12월 17일

와우 우연히 들어왔는데 너무너무 유용한 글이네요!!!! 내일 vscode에 깔아야겠어요 ㅎㅎㅎ공유 감사합니다~~~

답글 달기
comment-user-thumbnail
2020년 12월 24일

감사합니다! 이런거 어떻게 하나 싶었는데...
앞으로 활용할게요 :)

답글 달기
comment-user-thumbnail
2020년 12월 30일

카본만 알고 사용하고 있었는데 Polacode 한번 써봐야겠네요,, 카본에 복붙하는 일 없이 편리할 것 같아요 좋은 정보 감사합니다 🙏🏻

답글 달기
comment-user-thumbnail
2020년 12월 31일

갸꿀팁 감사합니다 :)

답글 달기
comment-user-thumbnail
2021년 1월 5일

안녕하세여^^ 잘 읽었습니다!!
Polacode에 대한 설명중 저런 영상은 어떻게 올릴 수 있을까요?

1개의 답글
comment-user-thumbnail
2021년 1월 6일

colorscripter 는 velog 에서는 복붙이 안먹히죠?

1개의 답글
comment-user-thumbnail
2021년 1월 8일

감사합니다 :)

답글 달기
comment-user-thumbnail
2021년 1월 12일

우와 감사합니다

답글 달기
comment-user-thumbnail
2021년 1월 12일

감사합니다!

답글 달기
comment-user-thumbnail
2021년 1월 14일

너무 유용해요👍👍

답글 달기
comment-user-thumbnail
2021년 1월 20일

Good ♥

답글 달기
comment-user-thumbnail
2021년 1월 20일

우와 감사합니다!!

답글 달기
comment-user-thumbnail
2021년 1월 21일

완전 유용해요 !

답글 달기
comment-user-thumbnail
2022년 1월 11일

안 그래도 어떻게 올려야하나 찾고 있었는데 딱 제가 찾던 정보네요! 감사합니다!ㅎㅎㅎ

답글 달기
comment-user-thumbnail
2023년 1월 6일

광고수익은안되는거죠??

답글 달기
comment-user-thumbnail
2023년 1월 25일

와우 감사합니다~!

답글 달기