하이라이터 작성 버튼

[denvergeeks]

	요약	Discourse 작성기 도구 모음용 텍스트 하이라이트 버튼
	미리보기	비디오 데모
	저장소	GitHub - denvergeeks/discourse-highlight-wrap-theme-component: A Text Highlighter Button for the Discourse Composer Toolbar · GitHub
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

이 버튼은 형광펜처럼 생겼습니다… 작성기 도구 모음에서 버튼을 클릭하여 <mark>이것</mark>을 삽입하는 매우 구체적이고 제한적인 목적으로 사용됩니다.

Ctrl-H는 버튼을 클릭하는 대신 사용할 수 있는 키보드 단축키입니다.

Discourse Composer Highlighter

설정에서 하이라이트(배경) 색상과 하이라이트된 부분의 텍스트 색상을 모두 사용자 지정할 수 있습니다.

이 작업에 도움을 주신 @pfaffman, @merefield, @Lilly, @JammyDodger, @Canapin 님께 진심으로 감사드립니다.

[Lilly (Lillian)]

정말 놀랍네요. 잘했어요

[fbpbdmin (deepblue)]

정말 좋은 것 같아요.

.d-wrap은 어디서 정의되어 있나요?
기본 테마에서는 제 환경에서 이렇게 표시됩니다… 영상에서처럼 하이라이터 색상을 적용하고 싶은데, 감사합니다

[Lilly (Lillian)]

사용 중인 해당 테마의 팔레트에서 --highlight-medium 색상 변수 설정인 것 같습니다.

common/common.scss

제 팔레트 중 하나가 이렇게 생겼습니다:

이 컴포넌트는 하이라이트 색상의 중간(medium) 그라데이션을 사용하고 있습니다. 관리자 설정에서 스타일 가이드를 활성화했거나(스타일 가이드 활성화 또는 스타일 가이드 관리자 전용) 관리자만 볼 수 있도록 설정했다면, 스타일 가이드에서 정확한 색상을 확인할 수 있습니다. 테마 색상의 스타일 가이드는 /styleguide/atoms/colors 경로에 있습니다.

[Lilly (Lillian)]

사실 하이라이터 색상 오버라이드를 위한 PR이나 제안을 올려볼 가치가 있을 것 같아요.

[fbpbdmin (deepblue)]

네, 생각해보니 설정 항목을 따로 두는 게 더 나을 것 같아요.

[denvergeeks]

설정 추가 중… 잠시만 기다려 주세요

[JammyDodger]

mark 태그을 사용하는 것이 더 적절할까요? 이 태그는 색상 팔레트에서 ‘하이라이트’ 색상을 사용한다고 생각합니다.

<mark>mark</mark>

[denvergeeks]

좋아요, 기본값을 #ff8으로 설정하는 옵션을 추가했습니다.

[Lilly (Lillian)]

하, 방금 PR을 보내려던 참이었어요

[denvergeeks]

[fbpbdmin (deepblue)]

좋아요, 방금 풀링했는데 아주 잘 작동합니다!

[Canapin (Coin-coin le Canapin)]

Hi @denvergeeks

기본 설정에서 당신의 스타일이 <mark> 태그와 어떻게 다른지 보여드립니다. (<mark>는 Discourse의 색상 변수를 사용하므로, 어떤 색상 테마를 선택해도 가독성이 유지됩니다.)

다크 테마에서의 모습:

[denvergeeks]

완벽해요 @Canapin, 반영할게요!

혹시 그 부분을 QPR로 처리하고 싶으신 분이 있으면 알려주세요. 오늘까지 처리가 어려울 수 있으니까요.

[denvergeeks]

OK, 이제 @Canapin의 제안에 따라 내장된 <mark> 태그와 해당 CSS 기본값을 사용하도록 변경했습니다.

또한 이제 하이라이터(배경) 색상과 하이라이트된 부분의 텍스트 색상을 모두 재정의할 수 있는 설정을 제공합니다. 해당 조건부 CSS는 @Lilly에게 감사드립니다.

[Lilly (Lillian)]

json 색상 선택기를 만들려고 했는데 작동이 안 돼요. 저장 버튼만 있는 빈 팝업만 뜨네요.
혹시 javascript로 되는지 알아볼까 해요. 색상 팔레트와 배지 인터페이스에는 color-picker js 함수가 있지만, 플러그인에서만 작동할 수도 있겠네요.

[Jagster (Jakke Flemming)]

@denvergeeks

둘 다 오버라이드

제 생각에는 그 설정들이 오버라이드가 아닙니다. 채워 넣어야만 작동하고, 그렇지 않으면 아무런 효과가 없어요.

그리고… 저는 기본 테마를 사용 중이고, 아침 커피가 부족해서 느린 모드입니다 — 그게 테마 자체에서 오는 건지 확인을 못 했어요.

수정: 아니요, 테마나 컬러 스킴이 아무런 역할을 하지 않습니다. 그러면 컬러 스킴을 따르는 오버라이드인지, 아니면 필수 설정인 걸까요?

[denvergeeks]

컴포넌트를 업데이트하고 페이지를 새로고침해 보세요. 저는 에러를 재현할 수 없습니다.

<mark></mark> 태그를 삽입하고 있나요?

[Jagster (Jakke Flemming)]

시도하기 전에 먼저 업데이트를 했습니다. 그리고 아니요, wrap을 사용하거든요. 그래서 제가 좀 뒤처져 있는 건가요?

[Canapin (Coin-coin le Canapin)]

@Lilly

어떻게든 자바스크립트 기반의 것이 가능한지 확인해 보겠습니다.

테마/컴포넌트에서 사용되는 색상 선택기 JSON 설정이 실제로는 Discourse에서 작동하지 않습니다.
사용자가 선택한 다른 테마와 색상에 따라 잘 어울리지 않을 수 있는 테마나 컴포넌트에서 임의의 색상을 선택하는 대신, 일반적으로 Discourse 색상 변수를 사용하는 것이 좋은 관행이라고 생각합니다.

어떤 사용자가 이전에 컴포저를 위한 색상 선택기를 만들었지만, 코드가 공개되었는지 확신할 수 없습니다:

테마에서 BBcode 색상 태그

I think I have something cooked up based on the previous work of you guys. Will post a PR this weekend. Still bugs and things to iron out. [qKJ3Qt2RpY]