티스토리 코드블럭 스타일 변경하기

티스토리 편집기에서 작성한 코드 블럭이 실제 포스팅했을 때 이상하게나와 티스토리 편집기처럼 코드블럭을 변경시켜보려고합니다.

 

좌:블로그 코드 블록 우:티스토리 편집기 코드블럭

 

티스토리 편집기 css 참고하기

티스토리 스킨 변경해야 할 부분

 

티스토리 편집기 css 적용하기

한 가지 주의해야할점은

티스토리의 content pre 속성을 -> 내 스킨의 entry-content pre 속성에 적용해야한다는 점입니다.

 

색상변경까지는 못하였지만 한결 깔끔해졌습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable name="feed" type="com.example.torang_core.data.model.Feed" />
        <import type="android.view.View" />
        <variable name="viewModel" type="com.sarang.base_feed.BaseFeedViewModel" />
    </data>

    <!-- parent layout -->
    <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content">
        <!-- 컴포즈 적용할 뷰 -->
        <androidx.compose.ui.platform.ComposeView android:id="@+id/greeting" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
        <!-- 기존 피드 상단영역 부모 레이아웃 -->
        <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingStart="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
            <!-- 우측 점3개 메뉴 -->
            <ImageView android:id="@+id/toolbar" android:layout_width="50dp" android:layout_height="50dp" android:onClick="@{()->viewModel.showMenu(feed)}" android:padding="10dp" android:src="@drawable/ic_dot" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />
            <!-- 프로필 이미지 -->
            <ImageView android:id="@+id/imageView2" loadCircleImage="@{feed.profile_pic_url}" android:layout_width="30dp" android:layout_height="30dp" android:onClick="@{()->viewModel.openProfile(feed.userId)}" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" tools:srcCompat="@tools:sample/avatars" tools:visibility="visible" />
            <!-- 닉네임 -->
            <TextView android:id="@+id/textView22" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{()->viewModel.openProfile(feed.userId)}" android:paddingLeft="8dp" android:paddingRight="8dp" android:text="@{feed.userName}" android:textColor="#000000" app:layout_constraintBottom_toTopOf="@+id/tv_restaurant" app:layout_constraintStart_toEndOf="@+id/imageView2" app:layout_constraintTop_toTopOf="@+id/imageView2" app:layout_constraintVertical_chainStyle="packed" tools:text="name" tools:visibility="visible" />
            <!-- 맛집 상호 -->
            <TextView android:id="@+id/tv_restaurant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{()->viewModel.openTorangDetail(feed.restaurantId)}" android:paddingLeft="8dp" android:paddingRight="8dp" android:text="@{feed.restaurantName}" app:layout_constraintBottom_toBottomOf="@+id/imageView2" app:layout_constraintStart_toStartOf="@+id/textView22" app:layout_constraintTop_toBottomOf="@+id/textView22" tools:text="restaurant" tools:visibility="visible" />
            <!-- 평점바 -->
            <RatingBar android:id="@+id/ratingBar4" style="@style/Widget.AppCompat.RatingBar.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:rating="@{feed.rating}" android:visibility="@{feed.rating == null ? View.GONE : View.VISIBLE}" app:layout_constraintBottom_toBottomOf="@+id/textView22" app:layout_constraintStart_toEndOf="@+id/textView22" app:layout_constraintTop_toTopOf="@+id/textView22" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>