# Destaque Rápido
**URL:** https://meta.discourse.org/t/fast-highlight/277528
**Category:** Development
**Created:** [1 Setembro , 2023 07:30 UTC](https://meta.discourse.org/t/fast-highlight/277528 "2023-09-01T07:30:30Z")
**Posts on this page:** 10
**Page:** 3
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [29 Setembro , 2023 05:54 UTC](https://meta.discourse.org/t/fast-highlight/277528/48 "2023-09-29T05:54:28Z")
Sim @satonotdead Acho que este tópico saiu um pouco dos trilhos… Acho que este tópico pode ser podado para se referir à adição de um botão de destaque _ao popup flutuante de edição/citação_
Então, criei um componente de tema [Highlighter Composer Button](https://meta.discourse.org/t/highlighter-composer-button/277597) para o propósito muito específico e limitado de clicar em um botão na barra de ferramentas do compositor para inserir `isto`, e também adicionei um atalho de teclado Ctrl-H para conveniência.
Existem 2 outros componentes de botão de compositor diferentes que permitem inserir código rapidamente para adicionar cores de fundo e de texto. Esses outros 2 não foram tão rápidos e convenientes para mim por 2 motivos:
1. Eles exigem a digitação manual de suas cores no código inserido para funcionar.
2. Eles nem sempre funcionam tão bem com outros elementos que uso em minhas postagens, como caixas de conteúdo roláveis:
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [29 Setembro , 2023 06:08 UTC](https://meta.discourse.org/t/fast-highlight/277528/49 "2023-09-29T06:08:37Z")
Você quer abrir um pouco como você fez aquelas caixas roláveis 🫣
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [29 Setembro , 2023 06:19 UTC](https://meta.discourse.org/t/fast-highlight/277528/50 "2023-09-29T06:19:11Z")
Claro @Jagster é este componente de tema…
> **[GitHub - discourse/Scrollable-post-content: A Discourse theme component that allows you to add...](https://github.com/discourse/Scrollable-post-content)**
>
> A Discourse theme component that allows you to add scrollable sections in posts
Eu estilizo as caixas assim…
```plaintext
/* Sombra da Caixa de Conteúdo Rolável */
.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;
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [29 Setembro , 2023 06:44 UTC](https://meta.discourse.org/t/fast-highlight/277528/51 "2023-09-29T06:44:59Z")
Infelizmente, não poderei usá-lo no meta… 😛
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [29 Setembro , 2023 15:38 UTC](https://meta.discourse.org/t/fast-highlight/277528/52 "2023-09-29T15:38:49Z")
@satonotdead desculpe por isso! Comecei a ter ideias aqui sobre maneiras de melhorar o composer, o que também estou achando útil. Pessoalmente, não estou convencido da sugestão da postagem original de adicionar uma opção de destaque ao lado de citação e edição rápida, ao selecionar texto em uma postagem que você está lendo. Faz mais sentido colocar esse recurso no composer, na minha opinião.
Existem também sugestões gerais aqui sobre diferentes maneiras pelas quais o texto pode ser formatado usando markdown, incluindo vários componentes de tema que foram criados ao longo dos anos.
> [@pfaffman](#):
>
> Várias pessoas estão trabalhando ou pensando em um documento específico. O documento está escrito e a discussão é sobre ele. Você pode querer destacar coisas nele, assim como faria há 20 anos em uma pilha de papel encadernado chamada “livro”. Muitas vezes, você gostaria de destacar uma seção e citá-la, mas pode apenas querer destacar coisas que pretende pensar mais tarde.
Interessante. Então você está sugerindo que o texto destacado seria visível apenas para o usuário, ou seria visível para todos? Então algumas pessoas poderiam ver o texto destacado de todos? Para mim, o último parece caótico e não muito útil. O primeiro eu não acho que seja viável de implementar.
[Discourse Shared Edits](https://meta.discourse.org/t/discourse-shared-edits/167583?u=tobiaseigen) poderia usar algo assim, então quando várias pessoas estão editando, fica claro quem contribuiu com qual texto. Mas também de valor um tanto limitado, acho, e potencialmente caótico.
> [@denvergeeks](#):
>
> Então, eu fiz um componente de tema [Highlighter Composer Button](https://meta.discourse.org/t/highlighter-composer-button/277597) para o propósito muito específico e limitado de clicar em um botão na barra de ferramentas do composer para inserir `\u003cmark\u003ethis\u003c/mark\u003e`, e também adicionei um atalho de teclado \u003ckbd\u003eCtrl-H\u003c/kbd\u003e para conveniência.
Incrível! Instalei isso no meu site pessoal e funciona bem. Bom trabalho!
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [29 Setembro , 2023 16:22 UTC](https://meta.discourse.org/t/fast-highlight/277528/53 "2023-09-29T16:22:09Z")
> [@tobiaseigen](#):
>
> ao selecionar texto em uma postagem que você está lendo.
Exatamente, @tobiaseigen! Usamos marcadores _quando estamos lendo_ e queremos destacar rapidamente partes do texto.
Eu penso nisso como eu uso a Edição Rápida onde posso (na janela de edição mini) digitar as tags em volta de \u003cmark\u003ealgum texto\u003c/mark\u003e que selecionei para editar…
`\u003cmark\u003ealgum texto\u003c/mark\u003e`
Você acha que funcionaria se eu fizesse uma cópia do Componente Tema Marcador e alterasse o código em **api-setup.js** para colocar o botão de marcador (Ou pressionar h) no PluginOutlet
`quote-button-after`
> **Código de api-setup.js**
>
> ```plaintext
> 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" + `` + "\n\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('[wrap=highlight]', '[/wrap]', 'this')
> perform: (e) => e.applySurround("", "", "this"),
> });
> });
>
> api.decorateCookedElement(
> async (elem, helper) => {
> const id = helper ? `post_${helper.getModel().id}` : "composer";
> applyHighlight(elem, id);
> },
> { id: "wrap-mark" }
> );
> });
>
> ```
Ou é uma empreitada inútil!?
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [29 Setembro , 2023 16:40 UTC](https://meta.discourse.org/t/fast-highlight/277528/54 "2023-09-29T16:40:21Z")
Certo. Entendo o que você está tentando fazer.
Se você conseguir fazer isso em um componente de tema, vá em frente. Eu não sou programador, então não sei como você faria isso.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [29 Setembro , 2023 16:57 UTC](https://meta.discourse.org/t/fast-highlight/277528/55 "2023-09-29T16:57:48Z")
Ambos inserir e ~~excluir~~
`Ambos inserir e excluir`
Agora eu _devo também_ incorporar isso em Componentes de Tema de Botão do Composer (apenas porque, como diz @Lilly – “gadgets são legais!”
Oi! [HTML Formatting Tags](https://www.w3docs.com/learn-html/html-tags-for-text-formatting.html)
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [30 Setembro , 2023 06:41 UTC](https://meta.discourse.org/t/fast-highlight/277528/56 "2023-09-30T06:41:09Z")
Para mim, isso poderia ser uma forma de marcador mais preciso.
Gostaria de saber se você poderia estender o sistema de marcação para lembrar seções de texto realçadas?
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [30 Setembro , 2023 06:43 UTC](https://meta.discourse.org/t/fast-highlight/277528/57 "2023-09-30T06:43:48Z")
_ **Pensamento muito interessante…** _
[Página anterior](https://meta.discourse.org/t/fast-highlight/277528.md?page=2)