음 @satonotdead 이 주제가 약간 어긋난 것 같네요… 이 주제는 부유형 편집/인용 팝업에 하이라이트 버튼을 추가하는 것에 대한 언급으로 정리될 것 같습니다.
그래서 저는 코모저 툴바에서 버튼을 클릭하여 <mark>이것</mark>을 삽입하는 매우 구체적이고 제한적인 목적을 위해 테마 컴포넌트(Highlighter Composer Button)를 만들었고, 편의를 위해 Ctrl-H 단축키도 추가했습니다.
텍스트 배경색과 글자색을 추가하기 위해 코드를 즉시 삽입할 수 있게 해주는 다른 두 가지의 코모저 버튼 컴포넌트가 있습니다. 이 다른 두 가지는 제게 다음과 같은 두 가지 이유로 그렇게 빠르고 편리하지 않았습니다:
작동하려면 삽입된 코드 내에서 색상을 수동으로 입력해야 합니다.
게시물에서 제가 사용하는 스크롤 가능한 콘텐츠 박스 같은 다른 요소들과 항상 잘 호환되지 않습니다:
스크롤되는 박스를 어떻게 만들었는지 살짝 공개해줄래? 
네, @Jagster 이 테마 컴포넌트입니다…
박스는 이렇게 스타일링하고 있습니다…
/* 스크롤 가능 콘텐츠 박스 그림자 */
.scrollable-content {
border-left: none !important;
background-color: var(--secondary) !important;
padding: 1em 0.5em 1em 1em !important;
box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
border-radius: 4px !important;
margin: 0 8.896px !important;
}
.scrollable-content-inner {
padding-right: 15px !important;
}
.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
}
불행히도 메타에서는 사용할 수 없겠네요… 
@satonotdead 죄송합니다! 컴포저(composer)를 개선하는 방법에 대해 이곳에서 아이디어를 나누고 있는데, 제게도 도움이 되고 있습니다. 개인적으로, 글을 읽다가 텍스트를 선택했을 때 인용(quote)과 빠른 편집(fast edit) 옵션과 함께 하이라이트 옵션을 추가하라는 원문의 제안에는 동의하지 않습니다. 제 생각에는 이 기능을 컴포저에 두는 것이 더 합리적입니다.
여기에는 마크다운을 사용하여 텍스트를 포맷팅하는 다양한 방법에 대한 일반적인 제안도 있으며, 지난 수년간 생성된 다양한 테마 컴포넌트도 포함됩니다.
흥미롭네요. 즉, 하이라이트된 텍스트는 사용자만 볼 수 있어야 한다는 건가요, 아니면 모든 사람이 볼 수 있다는 건가요? 즉, 여러 사람이 서로의 하이라이트된 텍스트를 볼 수 있다는 뜻인가요? 제 생각에는 후자가 혼란스럽고 그렇게 유용하지 않을 것 같습니다. 전자는 구현이 불가능하다고 생각합니다.
Discourse Shared Edits 에서도 이런 기능이 유용할 수 있습니다. 여러 사람이 함께 편집할 때 누가 어떤 텍스트를 기여했는지 명확하게 알 수 있거든요. 하지만 이것도 제 생각에는 가치가 다소 제한적이고 잠재적으로 혼란을 줄 수 있습니다.
훌륭합니다! 제 개인 사이트에 설치해 보았는데 잘 작동합니다. 잘 만들으셨네요!
정확합니다, @tobiaseigen ! 우리는 읽고 있을 때 텍스트의 일부를 빠르게 강조하고 싶을 때 형광펜을 사용하죠.
이것을 제가 사용할 수 있는 Fast Edit(빠른 편집) 기능처럼 생각합니다. (미니 편집 창에서) 편집할 텍스트를 선택한 후 some text 태그를 그 주위에 입력할 수 있거든요…
<mark>some text</mark>
Highlighter Theme Component의 사본을 만들어서 api-setup.js의 코드를 수정하여 형광펜 버튼(또는 h 키)을 PluginOutlet의
quote-button-after
위치에 배치하면 작동할 것 같나요?
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";
async function applyHighlight(element) {
const highlights = element.querySelectorAll("mark");
if (!highlights.length) {
return;
}
}
export default apiInitializer("0.11.1", (api) => {
const { iconNode } = require("discourse-common/lib/icon-library");
let icon = iconNode("highlighter");
const currentLocale = I18n.currentLocale();
// I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
// I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
I18n.translations[currentLocale].js.highlight_button_title = "Highlight Text";
I18n.translations[currentLocale].js.composer.this = "this";
// I18n.translations[currentLocale].js.composer.highlight_button_text = "Highlight Text";
api.modifyClass("controller:composer", {
pluginId: "highlight",
actions: {
highlightButton() {
this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n</mark>\n");
},
},
});
// add button to the toolbar
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "composer_highlight_button",
group: "extras",
icon: "highlighter",
shortcut: "H",
preventFocus: true,
trimLeading: true,
title: "highlight_button_title",
// perform: e => e.applySurround('<span>[wrap=highlight]', '[/wrap]</span>', 'this')
perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
});
});
api.decorateCookedElement(
async (elem, helper) => {
const id = helper ? `post_${helper.getModel().id}` : "composer";
applyHighlight(elem, id);
},
{ id: "wrap-mark" }
);
});
아니면, 이건 헛수고일까요!?
네, 어떤 일을 하려는지 이해했습니다.
테마 컴포넌트로 처리할 수 있다면 그렇게 하셔도 됩니다. 저는 프로그래머가 아니라서 어떻게 구현해야 하는지는 잘 모르겠어요.
두 가지 모두 추가와 삭제
두 가지 모두 <ins>추가</ins>와 <del>삭제</del>
이제 반드시 이들을 Composer Button Theme Components에 통합해야 합니다 (그냥, @Lilly가 말한 대로 "가젯은 멋지니까요!"라고요)
나에게는 이것이 더 정확한 북마크의 형태일 수 있습니다.
텍스트의 강조된 부분을 기억하도록 북마크 시스템을 확장할 수 있을까요?
매우 흥미로운 생각입니다…