티스토리에서 기본적으로 코드에대한 하일라이트를 제공하지만 어찌된 것인지 편집화면에서만 적용이 되고 실제 화면에서는 적용되지 않는다.
코드 하일라이트 기능은 코드에 대한 가독성을 높이는데 없어서는 안되는 기능이다.
라인 넘버 또한 코드를 설명하는데 필수기능이라 할 수 있다.
스크롤 기능은 꼭 필요하지 않치만 긴 코드로 인해 전체 포스팅이 길어지는 것을 방지하고 필요할 경우만 코드를 스크롤 하여 볼수있도록 하여 전체 포스팅의 가독성을 높일 수 있은 기능이라 할 수 있겠다.
코드 하일라이트 기능을 구현하는 방벙에는 여러 방법이 있겠지만 다양한 방법 중 테스트를 통해 본 블로그에 적용되어 있는 방법을 소개하려 한다.
모든 코드가 적용되면 아래와 같은 화면을 볼 수 있다.
class FloatingModal extends StatelessWidget {
final Widget child;
final Color? backgroundColor;
const FloatingModal({Key? key, required this.child, this.backgroundColor})
: super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: MediaQuery.of(context).viewInsets,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
child: Material(
color: backgroundColor,
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(12),
child: child,
),
),
),
),
);
}
}
티스토리 스킨 편집
코드 하일라이트와 라이넘버를 적용은 티스토리 스킨 편집 화면에서 할 수 있다.
설정 "꾸미기 -> 스킨 편집 -> html 편집"
코드 하일라이트 설정하기
highlight.js를 사용하여 코드 하일라이트를 설정해보자
html 편집에서 <head> </head> 사이에 아래 코드를 추가하면 끝!!
<!--하일라이트 테마 지정 -->
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/base16/atelier-forest.min.css">
<!--하일라이트 기본 라이브러리 -->
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js"></script>
<script>
//하이라이트 시작
hljs.initHighlightingOnLoad();
</script>하일라이트 테마는 아래 사이트에서 확인 할 수있다.
https://highlightjs.org/static/demo/
주의할 것은 테마이름은 모두 소문자로 공백은 하이픈(-)으로 대체하여야 하며 min.css를 붙여 주어야 한다.
예를 들어 아래 그림과 같이 테마 이름이 Atelier Forest 일 경우 atelier-forest.min.css로 입력하여야 한다.
코드 라인넘버 설정하기
코드블럭에 라인넘버를 표시하기위해 여러가지를 테스트해보았지만 현재 본 블로그에 적용되어 있는 것은 linenumberV2.js 라이브러리다.
아래는 개발자 사이트로 파일을 다운로드 받을 수 있고 설치방법 및 사용법을 확인 할 수 있다.
https://alikong.tistory.com/46
많이 사용되어지고 있는 highlightjs-line-numbers 라이브러를 사용하지 않고 linenumberV2를 사용한 이유,
highlightjs-line-numbers는 하일라이트를 망가트렸으며 들여쓰기를 엉망으로 만들어 내 코드를 보기 어렵게 만들었다.
물론 내가 뭔가 설정을 잘 못 했을 수 있다.
1. linenumberV2.js 파일 업로드
위 사이트에서 파일을 다운로드 받아 업로드 하여야 한다.
Html과 CSS에 코드를 추가해 주자
티스토리에서 사용자 파일을 images폴더에 업로드 된다.
하일라이트와 마찬가지올 아래 코드를 <head></head> 사이에 추가해주자.
<script src="./images/linenumberV2.js"></script>
CSS는 제법 길다. 기존 CSS문자 마지막에 전부 붙여넣기해주면 된다.
pre[data-ke-type='codeblock'] {
white-space: pre-wrap;
word-break: break-word;
margin: 0 0 20px 0;
font-size: 13px;
line-height: 17px;
}
pre[data-ke-type='codeblock'] > code {
display: block;
overflow-x: auto;
font-family: consolas, monospace;
}
pre[data-ke-type='codeblock'] > code.lnWrap {
position: relative;
padding-left: 40px;
}
pre[data-ke-type='codeblock'] > code .ln[data-ln]::before,
pre[data-ke-type='codeblock'] > code .ln[data-ln--before]::before {
content: attr(data-ln);
}
pre[data-ke-type='codeblock'] > code .ln,
pre[data-ke-type='codeblock'] > code .lnBorder {
box-sizing: border-box;
position: absolute;
left: 0;
display: inline-block;
width: 40px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
pre[data-ke-type='codeblock'] > code .lnBorder {
z-index: 1;
top: 0;
bottom: 0;
border: 0px solid transparent;
border-right-color: #ccc;
}
pre[data-ke-type='codeblock'] > code .ln {
z-index: 0;
padding-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
pre[data-ke-type='codeblock'] > code .lc {
box-sizing: border-box;
display: inline-block;
width: 100%;
padding-left: 10px;
}
pre[data-ke-type='codeblock'] > code.noline .lc {
padding-left: 0;
}
pre[data-ke-type='codeblock'] > code .ln.marker {
background-color: rgba(40, 70, 100, 1);
background: linear-gradient(to left, rgba(40, 70, 100, 1) 60%, transparent);
color: white !important;
}
pre[data-ke-type='codeblock'] > code .lc.marker {
background-color: rgba(40, 70, 100,1);
background: linear-gradient(to right, rgba(40, 70, 100, 1) 80%, transparent);
}
pre[data-ke-type='codeblock'] > code .lnA { }
pre[data-ke-type='codeblock'] > code .lnB { }
pre[data-ke-type='codeblock'] > code .colBox {
display: inline-block;
width: 8px;
height: 8px;
vertical-align: middle;
margin-right: 4px;
outline: 1px solid grey;
}
pre[data-ke-type='codeblock'] > code .hover, pre[data-ke-type='codeblock'] > code .clicked {
outline: solid 1px gold;
}
pre[data-ke-type='codeblock'] > code .solo:hover {
color: red;
}
전체 코드이다. CSS는 바로 위 코드를 사용하면 된다.
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/base16/atelier-forest.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js"></script>
<script src="./images/linenumberV2.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
하일라이트와 라인넘버를 위해 몇 가지 시도해보고 가장 편한 방법을 적어보았다.
틀린점이나 궁금한 점은 댓글로 부탁합니다.
하트뿅뽕 구독 부탁해요~~
'게임 & 프로그래밍' 카테고리의 다른 글
| Admob for Flutter 플러터에 구글 애드몹 광고 달기 (0) | 2021.10.28 |
|---|---|
| [Figma]이미지 블러 처리하기 (1) | 2021.07.24 |
| [Flutter]플러터 앱 버전 관리 (0) | 2021.07.05 |
| [Flutter ]ListView를 이용한 단어장 목록 만들기 2 (0) | 2021.05.26 |
| [Flutter]단어장 데이터 만들기 (0) | 2021.05.21 |
댓글