티스토리 ) 코드블럭 + CSS 수정으로 코드 예쁘게 넣기

안녕하세요. 빵빵아빠입니다.

오늘은 티스토리의 코드블럭을 예쁘게 보여주기 위한 방법을 알려드리도록 하겠습니다.

 

아래는 제가 다른 데에 쓰기 위해 임시로 만든 글을 캡쳐한 내용입니다.

SQL 문과 Java인데 밍숭맹숭하고 보기 썩 좋지 않습니다.

우선 우리는 간단하게 코드 문법 강조를 적용시킬 수 있습니다. 

티스토리 관리페이지 -> 플러그인 -> 코드 문법 강조를 누르시면, 아래와 같이 테마를 적용시킬 수 있는 UI가 나옵니다. 여기에서 테마를 고르면, 에디터에서 코드블럭 삽입 시에 자동으로 적용 됩니다.

728x90

먼저 예시에 있던 코드를 테마별로 적용 시킨 스크린샷을 보여드리도록 하겠습니다.

- Atom One Dark

- Atom One Light

- Github

- Monokai

- Darcula

- Visual Studio

- Xcode

각각의 스크린샷을 보면 테마가 잘 적용 된것을 볼 수 있습니다. 하지만, 테두리가 회색으로 두껍게 있고, 폰트가 영 깔끔하게 보이질 않습니다. 그래서 티스토리의 플러그인 대신에 직접 highlight.js를 다운 받아서 적용 하는 방식을 사용하시는분들이 많을 것입니다. 저는 그렇게 디테일한 코드 블럭까지는 안 해도 될 것 같으니 티스토리의 플러그인에 약간의 CSS만 수정해서 사용해보도록 하겠습니다.

 

우선 바깥에 있는 회색 테두리는 사실 백그라운드와 padding으로 이루어진 것입니다.  웹 구성을 보면 .article-view pre의 padding과 background가 테두리를 만드는 범인입니다. 이 두개를 지워 주면 테두리는 사라집니다. 저는 약간의 padding은 지우지 않고 padding: 5px로 변경했습니다. 상하좌우에 5px씩 떨어지는 효과를 가지게 됩니다.

지우는 방법은 티스토리 관리메뉴 - 꾸미기 - 스킨 편진 - html 편집 - CSS 에 가셔서 article-view pre를 검색하셔서 2개를 지워 주시면 됩니다. 

그 다음으로 Font는 아래와 같이 code, kbp, samp라는 것의 font-family의 영향을 받아서 보여지고 있습니다. 현재 티스토리에서 외부로 보여지는 폰트를 확인 해보니 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif임을 알 수 있었습니다. 여기에 추가로 검색해보니 Consolas라는 폰트가 마음에 들어서 저는 해당 css를

    font-family: "Consolas", "Sans Mono", "Courier", 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;

로 변경했습니다.

폰트는 개인의 취향임으로 원하는 폰트를 찾아서 쓰시면 됩니다.

 

명령의 1 행에서 시작하는 중 오류 발생 -
INSERT INTO PPANG_USER (user_id, user_name, user_level) VALUES (1, 박채은, 1)
오류 발생 명령행: 1 열: 68
오류 보고 -
SQL 오류: ORA-00984: 열을 사용할 수 없습니다
00984. 00000 -  "column not allowed here"
*Cause:    
*Action:

public class User extends ModelBase {
	
	private int userId;
	private String userName;
	private int userLevel;

	public int getUserId() {
		return this.userId;
	}
}

 

읽어주셔서 감사합니다.