[티스토리] 코드블럭 스크롤 적용

티스토리에서 코드블럭을 사용하다보면, 전체 코드를 입력할때 위아래로 코드가 너무 길어 전체 글의 가독성을 해치는 경우가 생긴다.

 

이런경우 코드블럭에 최대 높이 제한과 스크롤을 적용해서 코드블럭이 차지하는 높이를 제한하도록 하였다.

 

 

코드블럭에 스크롤을 적용하기 위해서는 티스토리 관리자 모드에서 
꾸미기 -> 스킨편집 -> html 편집 -> CSS 순으로 선택하여 아래 코드를 하단에 붙여넣는다.

code {
    white-space: pre; 					// 공백을 그대로 표시
    max-height: 480px; 					// 최대 높이 제한
    max-width: 1080px;					// 최대 넓이 제한
    overflow: auto !important;			// 크기 초과시 스크롤 적용 
}

 

스크롤 적용된 코드블럭 예시)

import 'package:flutter/material.dart';
import 'package:ftweather/provider/MapModel.dart';
import 'package:naver_map_plugin/naver_map_plugin.dart';
import 'package:provider/provider.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mapPosition = Provider.of<MapModel>(context).mapPosition;
    final model = Provider.of<MapModel>(context, listen: false);
    final markers = Provider.of<MapModel>(context).markers;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Weather App'),
      ),
      body: Column(
        children: [
          Expanded(
            flex: 6,
            child: Stack(
              children: [
                NaverMap(
                  // NaverMapController를 model에 전달
                  onMapCreated: (controller) {
                    model.setController(controller);
                  },
                  mapType: MapType.Hybrid,
                  locationButtonEnable: true,
                  initialCameraPosition: mapPosition, 
                  markers: markers, // MapModel에서 가져온 markers 사용
                ),
                Positioned(
                  bottom: 16,
                  right: 16,
                  child: FloatingActionButton(
                    onPressed: () {
                      // addMarker() 메서드를 호출하여 현재 위치에 마커 추가
                      Provider.of<MapModel>(context, listen: false).addMarker();
                    },
                    tooltip: 'Increment',
                    child: const Icon(Icons.add),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 4,
            child: ListView.builder(
              itemCount: markers.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(markers[index].markerId.toString()),				// Marker id
                      Text(markers[index].position!.latitude.toString()),	// Marker lat
                      Text(markers[index].position!.longitude.toString()),	// Marker lon
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}