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

yeseolee·2020년 12월 12일
166

블로그 튜토리얼

목록 보기
3/3
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에서 사용 가능한 플러그인이다.
마우스 드래그만으로 만들 수 있고, 코드 작업 도중에 따로 창을 열지 않아도 바로 만들 수 있다.

📌 Carbon

https://carbon.now.sh/

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

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

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

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

profile
알고리즘/안드로이드 공부하는 학생

18개의 댓글

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
2020년 12월 31일

진짜 잘 써먹고 있어요!
이 색깔 예쁩니다 여러분
https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=shades-of-purple&wt=none&l=text%2Fx-c%2B%2Bsrc&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=

2개의 답글
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월 8일

감사합니다 :)

답글 달기
comment-user-thumbnail
7일 전

우와 감사합니다

답글 달기
comment-user-thumbnail
6일 전

감사합니다!

답글 달기
comment-user-thumbnail
5일 전

너무 유용해요👍👍

답글 달기