티스토리 블로그에 소스코드 넣기

그냥 코드를 복붙하면 글자색도 없고 들여쓰기도 이상해서 코드 가독성이 떨어지는데 그렇다고 사진으로 올리면 보기에는 좋으나 코드 긁어쓰기가 안된다. 코드블럭을 써서 해결해보자.

 

블로그에 소스코드 넣기

1. 티스토리 관리로 접속해서 플러그인을 클릭한다.

2. Syntax Highlight 플러그인을 찾아서 테마 선택하고 적용해준다.

3. 이제 블로그 글쓰기에서 ... 을 누르고 '<> 코드블럭' 을 넣는다.

코드 블럭에 언어 별로 선택할 수 있다. 넣어보면 우리가 사용했던 개발 툴만큼 시인성이 좋지않다. 그래서

4. 구글에 color scripter 검색 후 접속한다.

 

여기다가 코드를 복붙하면 알록달록하게 들여쓰기를 해준다.

언어 자동감지나 선택하고 스타일도 선택한 뒤 코드 복붙해준다.

세부설정에 기타등등 있는데 한글 읽어보면 대충 알 것이다.

 

언어 설정에 Dart 가 없어서 이것저것 해봤더니 DartPad 보단 못하지만 CSS 선택 시 좀 화려하게 나온다.

5. 결과

블로그 글작성 중에는 코드블럭 배경색이 안보일 수 있지만 글쓰고 나서 확인해보면 이렇게 나온다.

 

- DartPad 코드를 Color Scripter 로 복붙 -> 코드블럭(언어 kotlin 선택)으로 복붙 -> 큰 덩어리를 구분하는 빈 라인이 씹혔다.

import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

 

- DartPad 코드를 바로 코드블럭(언어 kotlin 선택)으로 복붙 -> 이게 더 나은 것같다. Dart 언어가 선택에 없다면 걍 DartPad 에서 복붙해 써야겠다.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}