Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Request] Specifiy colors in text #88

Closed
nshern opened this issue Dec 9, 2023 · 7 comments · Fixed by #390
Closed

[Request] Specifiy colors in text #88

nshern opened this issue Dec 9, 2023 · 7 comments · Fixed by #390

Comments

@nshern
Copy link

nshern commented Dec 9, 2023

I think it would be valuable to be able to specify colors for text, so that certain text elements could be emphasized.
I imagine it would be similar to how markdown is able to render it via html e.g.:

<span style="color:blue">some *blue* text</span>.
@mfontanini
Copy link
Owner

I think this is generally a good idea and I can see the usefulness of it. However, I'm afraid of doing something like this because:
a) The code will now need to start parsing HTML.
b) Once you start allowing some HTML, more HTML parsing requests will inevitably be made. e.g. then we'll want entire divs with color. Then why not also allow alignment? Why not sub divs that split the text into columns?

I'd like to keep this open until enough people claim this should be a supported feature as I think it will open the door for a lot of complexity in the app.

@rondymesquita
Copy link

One suggestion: What about something similar with https://www.npmjs.com/package/markdown-it-attrs
Adding the ability to have attributes? But instead of using css classes, using hexa colors?

# header {color:#fff}
paragraph {color:#00ff00}

@mfontanini
Copy link
Owner

That doesn't look bad actually... Maybe that's an alternative worth considering so we don't go down the html route.

@carbon-steel
Copy link

Definitely would love to see this. Especially if the colors could reference colors from the current theme.

@henryiii
Copy link

Is there a way to color just a word or section of words with the atters route?

@DrunkenToast
Copy link
Contributor

Is there a way to color just a word or section of words with the atters route?

There's a mention of bracketed spans so something like this: this is [red text]{color:red}, could work

mfontanini added a commit that referenced this issue Nov 10, 2024
This PR adds support to parse inline span html tags and the `color` and
`background-color` CSS attributes in the `style` span tag attribute.

The `color` and `background-color` can have any `#RRGGBB` formatted
color + any color like `red`, `dark_red`, etc, as used in themes.

For now this only supports "strict" mode in which any deviation from
what's supported will raise an error. In another PR I will add a way to
configure this flag so if you don't feel like erroring, you can disable
it.

After this change, the following:

~~~markdown
# <span style="color: black; background-color: yellow"> _hi_ </span> mom

Paragraphs can <span style="color: #ffff00">**mix** colors <span
style="background-color: white">in any way</span>


* <span style="color: red">this is red</span>
* this has <span style="background-color: blue">blue background</span>
~~~

Renders as:


![image](https://github.com/user-attachments/assets/fbd938da-4b78-46a0-ae90-cd8926cf4041)

Fixes #88
@mfontanini
Copy link
Owner

This is fixed now, I ended up using spans to not add more custom syntax here. See #390 for more info. I may also add some palette or something to the theme so you can use <span class="foo"> multiple times without having to spell out the colors every time but at least for now this unblocks this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants