Last active
April 28, 2023 08:24
-
-
Save ciceronianus/97d493cdc8d770e37ee0d085fc36ed3d to your computer and use it in GitHub Desktop.
(deprecated) Roam - colored bold, italics and highlight by @CatoMinor3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Author:: @CatoMinor3 | |
| Version:: 3.0 | |
| Date:: Sept.rm-italicsber 22nd, 2020 | |
| Changes log: | |
| - 3.0 - code adapted for the new classes in Roam | |
| - 2.1 - code adaptated for future support of colour shades (different opacity), | |
| download the additonal CSS here: https://gist.github.com/ciceronianus/5d7b224658b7a9832a6249a13091aa9d | |
| Support: | |
| - Paypal: https://www.paypal.me/catominor3 | |
| - Patreon: https://www.patreon.com/catominor | |
| How to use this? Simply write c:COLOR (see supported colors below) and follow it with | |
| the highlighted text, bold text or .rm-italicsphasis. | |
| */ | |
| /* ---------------- Roam colors -----------------*/ | |
| /*Supporter colors: | |
| https://github.com/mrmrs/colors | |
| .navy { color: #001F3F; } | |
| .blue { color: #0074D9; } | |
| .aqua { color: #7FDBFF; } | |
| .teal { color: #39CCCC; } | |
| .olive { color: #3D9970; } | |
| .green { color: #2ECC40; } | |
| .lime { color: #01FF70; } | |
| .yellow { color: #FFDC00; } | |
| .orange { color: #FF851B; } | |
| .red { color: #FF4136; } | |
| .fuchsia { color: #F012BE; } | |
| .purple { color: #B10DC9; } | |
| .maroon { color: #85144B; } | |
| .silver { color: #DDDDDD; } | |
| .gray { color: #AAAAAA; } | |
| .black { color: #111111; } | |
| */ | |
| [data-tag^="c:"] { | |
| display:none !important; | |
| } | |
| [data-tag^="c:"] + .rm-highlight, | |
| [data-tag^="c:"] + span > .rm-page-ref--link { | |
| color: white !important; | |
| border-radius: 5px; | |
| padding-left: 5px; | |
| padding-right: 5px; | |
| font-weight: bold; | |
| } | |
| [data-tag^="c:navy"] + .rm-highlight, | |
| [data-tag^="c:navy"] + span > .rm-page-ref--link { | |
| background-color: #001F3F !important; | |
| } | |
| [data-tag^="c:navy"] + .rm-italics, | |
| [data-tag^="c:navy"] + .rm-bold | |
| {color: #001F3F; } | |
| [data-tag^="c:blue"] + .rm-highlight, | |
| [data-tag^="c:blue"] + span > .rm-page-ref--link { | |
| background-color: #0074D9 !important; | |
| } | |
| [data-tag^="c:blue"] + .rm-italics, | |
| [data-tag^="c:blue"] + .rm-bold { | |
| color: #0074D9; | |
| } | |
| [data-tag^="c:aqua"] + .rm-highlight, | |
| [data-tag^="c:aqua"] + span > .rm-page-ref--link { | |
| background-color: #7FDBFF !important; | |
| } | |
| [data-tag^="c:aqua"] + .rm-italics, | |
| [data-tag^="c:aqua"] + .rm-bold { | |
| color: #7FDBFF; | |
| } | |
| [data-tag^="c:teal"] + .rm-highlight, | |
| [data-tag^="c:teal"] + span > .rm-page-ref--link { | |
| background-color: #39CCCC !important; | |
| } | |
| [data-tag^="c:teal"] + .rm-italics, | |
| [data-tag^="c:teal"] + .rm-bold { | |
| color: #39CCCC; | |
| } | |
| [data-tag^="c:olive"] + .rm-highlight, | |
| [data-tag^="c:olive"] + span > .rm-page-ref--link { | |
| background-color: #3D9970 !important; | |
| } | |
| [data-tag^="c:olive"] + .rm-italics, | |
| [data-tag^="c:olive"] + .rm-bold { | |
| color: #3D9970; | |
| } | |
| [data-tag^="c:green"] + .rm-highlight, | |
| [data-tag^="c:green"] + span > .rm-page-ref--link { | |
| background-color: #2ECC40 !important; | |
| } | |
| [data-tag^="c:green"] + .rm-italics, | |
| [data-tag^="c:green"] + .rm-bold { | |
| color: #2ECC40; | |
| } | |
| [data-tag^="c:lime"] + .rm-highlight, | |
| [data-tag^="c:lime"] + span > .rm-page-ref--link { | |
| background-color: #01FF70 !important; | |
| } | |
| [data-tag^="c:lime"] + .rm-italics, | |
| [data-tag^="c:lime"] + .rm-bold { | |
| color: #01FF70; | |
| } | |
| [data-tag^="c:yellow"] + .rm-highlight, | |
| [data-tag^="c:yellow"] + span > .rm-page-ref--link { | |
| background-color: #FFDC00 !important; | |
| } | |
| [data-tag^="c:yellow"] + .rm-italics, | |
| [data-tag^="c:yellow"] + .rm-bold { | |
| color: #FFDC00; | |
| } | |
| [data-tag^="c:orange"] + .rm-highlight, | |
| [data-tag^="c:orange"] + span > .rm-page-ref--link { | |
| background-color: #FF851B !important; | |
| } | |
| [data-tag^="c:orange"] + .rm-italics, | |
| [data-tag^="c:orange"] + .rm-bold { | |
| color: #FF851B; | |
| } | |
| [data-tag^="c:red"] + .rm-highlight, | |
| [data-tag^="c:red"] + span > .rm-page-ref--link { | |
| background-color: #FF4136 !important; | |
| } | |
| [data-tag^="c:red"] + .rm-italics, | |
| [data-tag^="c:red"] + .rm-bold | |
| { | |
| color: #FF4136; | |
| } | |
| [data-tag^="c:fuchsia"] + .rm-highlight, | |
| [data-tag^="c:fuchsia"] + span > .rm-page-ref--link { | |
| background-color: #F012BE !important; | |
| } | |
| [data-tag^="c:fuchsia"] + .rm-italics, | |
| [data-tag^="c:fuchsia"] + .rm-bold { | |
| color: #F012BE; | |
| } | |
| [data-tag^="c:purple"] + .rm-highlight, | |
| [data-tag^="c:purple"] + span > .rm-page-ref--link { | |
| background-color: #B10DC9 !important; | |
| } | |
| [data-tag^="c:purple"] + .rm-italics, | |
| [data-tag^="c:purple"] + .rm-bold { | |
| color: #B10DC9; | |
| } | |
| [data-tag^="c:maroon"] + .rm-highlight, | |
| [data-tag^="c:maroon"] + span > .rm-page-ref--link { | |
| background-color: #85144B !important; | |
| } | |
| [data-tag^="c:maroon"] + .rm-italics, | |
| [data-tag^="c:maroon"] + .rm-bold { | |
| color: #85144B; | |
| } | |
| [data-tag^="c:silver"] + .rm-highlight, | |
| [data-tag^="c:silver"] + span > .rm-page-ref--link { | |
| background-color: #DDDDDD !important; | |
| } | |
| [data-tag^="c:silver"] + .rm-italics, | |
| [data-tag^="c:silver"] + .rm-bold { | |
| color: #DDDDDD; | |
| } | |
| [data-tag^="c:gray"] + .rm-highlight, | |
| [data-tag^="c:gray"] + span > .rm-page-ref--link { | |
| background-color: #AAAAAA !important; | |
| } | |
| [data-tag^="c:gray"] + .rm-italics, | |
| [data-tag^="c:gray"] + .rm-bold { | |
| color: #AAAAAA; | |
| } | |
| [data-tag^="c:black"] + .rm-highlight, | |
| [data-tag^="c:black"] + span > .rm-page-ref--link { | |
| background-color: #111111 !important; | |
| } | |
| [data-tag^="c:black"] + .rm-italics, | |
| [data-tag^="c:black"] + .rm-bold { | |
| color: #111111; | |
| } |
Hi, try #cred ^^test^^ 🙂
…________________________________
From: svinter <notifications@github.com>
Sent: Tuesday, September 8, 2020 1:49 PM
To: ciceronianus <ciceronianus@noreply.github.com>
Cc: ciceronianus <ciceronianus@outlook.com>; Author <author@noreply.github.com>
Subject: Re: ciceronianus/Roam-colored_fonts.css
@svinter commented on this gist.
________________________________
Thanks for this.
After cutting-and-pasting your css into roam/css, I tried
#c:red test
(also #c:RED, and c:red just in case :-) and got no love. Any suggestions? Apologies for my ignorance.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub<https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgist.github.com%2F97d493cdc8d770e37ee0d085fc36ed3d%23gistcomment-3445723&data=02%7C01%7C%7C0278c47d23ee4433adb708d853ed2f73%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637351625444068297&sdata=epoa16eTqH7BE%2Bud37Gp%2BrziGI4ffj0frRzcuvjaalk%3D&reserved=0>, or unsubscribe<https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAPCFBULYV5C33UUB5OPNQWLSEYK27ANCNFSM4Q73XM6A&data=02%7C01%7C%7C0278c47d23ee4433adb708d853ed2f73%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637351625444078296&sdata=uVGVouvHNsi6ChooLL8PoFAauOh9Ho%2BnuhHDNIv5hdw%3D&reserved=0>.
Works great, thanks!
...but how do I turn off highlight to get, for example, just blue?
(embarrassed to be so dense...since no one else is asking, I assume it is
obvious...)
…On Tue, Sep 8, 2020 at 11:38 AM ciceronianus ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
Hi, try #cred ^^test^^ 🙂
________________________________
From: svinter ***@***.***>
Sent: Tuesday, September 8, 2020 1:49 PM
To: ciceronianus ***@***.***>
Cc: ciceronianus ***@***.***>; Author <
***@***.***>
Subject: Re: ciceronianus/Roam-colored_fonts.css
@svinter commented on this gist.
________________________________
Thanks for this.
After cutting-and-pasting your css into roam/css, I tried
#c:red test
(also #c:RED, and c:red just in case :-) and got no love. Any suggestions?
Apologies for my ignorance.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub<
https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgist.github.com%2F97d493cdc8d770e37ee0d085fc36ed3d%23gistcomment-3445723&data=02%7C01%7C%7C0278c47d23ee4433adb708d853ed2f73%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637351625444068297&sdata=epoa16eTqH7BE%2Bud37Gp%2BrziGI4ffj0frRzcuvjaalk%3D&reserved=0>,
or unsubscribe<
https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAPCFBULYV5C33UUB5OPNQWLSEYK27ANCNFSM4Q73XM6A&data=02%7C01%7C%7C0278c47d23ee4433adb708d853ed2f73%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637351625444078296&sdata=uVGVouvHNsi6ChooLL8PoFAauOh9Ho%2BnuhHDNIv5hdw%3D&reserved=0>.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3446000>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQSQV355NWOCE6LRITZETATSEZFWDANCNFSM4Q73XM6A>
.
You can combine #c:COLOR also with emphasis or bold to get coloured text without highlighting :).
How?
None of these seem to work:
- #c:blue ^^**test**^^
- #c:blue **^^test^^**
- **#c:blue ^^test^^**
…On Sun, Sep 13, 2020 at 2:43 AM ciceronianus ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
You can combine #c:COLOR also with emphasis or bold to get coloured text
without highlighting :).
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3452069>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQSQV3YRLLX4A7DOOCC3KOLSFRSYXANCNFSM4Q73XM6A>
.
It works great. Only use '#c:blue test'
- #c:blue test
Bingo! I hadn't realized that bold and emphasis work in markup without
explicit markup designations. Thank you!
…On Sun, Sep 13, 2020 at 6:22 PM olivierkbb ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
- #c:blue *test*
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3452678>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQSQV3ZTXRDGXR6Q2KVTK23SFVA25ANCNFSM4Q73XM6A>
.
;)
#c:blue ** test **
Thank you, Olivier, for helping Svinter out :)).
Does this work in general or are highlights/bold/italics somehow special in Roam?
I tried to style Pagelinks (#c:red [[Page]]) and even made my own styling tag for quotes (#quote[[Person Page]]), but that didn't work:
[data-tag="quote"] {
display:none !important;
}
[data-tag="quote"] + .rm-page-ref-link-color {
CSS styling
}
In the latest Roam version(0.7.7-34242117), Roam-colored-fonts does not work anymore😭. Can you recover it? Thank you!!!🙏
In the latest Roam version(0.7.7-34242117), Roam-colored-fonts does not work anymore😭. Can you recover it? Thank you!!!🙏
Can you check it now? :)
We need to update it to the following:
... + .roam-highlight, /* Changed the class name for highlights */
... + em, /* for italics */
... + strong, /* for bold */
... + span > .rm-page-ref-link-color { /* for links */I made those changes and it works for me again. You can find the updated CSS in my fork: https://gist.github.com/stanidesis/987c9919789007f7dd9d587428580b56
In the latest Roam version(0.7.7-34242117), Roam-colored-fonts does not work anymore😭. Can you recover it? Thank you!!!🙏
Can you check it now? :)
Yes, It works very well! Thank you so much!!!
Hi,
We need to update it to the following:
... + .roam-highlight, /* Changed the class name for highlights */ ... + em, /* for italics */ ... + strong, /* for bold */ ... + span > .rm-page-ref-link-color { /* for links */I made those changes and it works for me again. You can find the updated CSS in my fork: https://gist.github.com/stanidesis/987c9919789007f7dd9d587428580b56
Actually, there was an update of Roam that forces me to change the code :). Try to update Roam and then use the code I posted here :).
Hi,
We need to update it to the following:
... + .roam-highlight, /* Changed the class name for highlights */ ... + em, /* for italics */ ... + strong, /* for bold */ ... + span > .rm-page-ref-link-color { /* for links */I made those changes and it works for me again. You can find the updated CSS in my fork: https://gist.github.com/stanidesis/987c9919789007f7dd9d587428580b56
Actually, there was an update of Roam that forces me to change the code :). Try to update Roam and then use the code I posted here :).
You're right! My roam just got the update. Thank you
Hello! Been using this for a while but recently I've only been able to apply color to italicized text (doesn't work for bold/highlighted text). This is even with Roam fully updated. Any tips appreciated, thanks for making this very handy tool :)
I know nothing about how to do this, but I have been trying and trying to use this and cannot it to work. I wonder if it is outdated?
Try this one: https://github.com/ciceronianus/roam-customization/blob/main/CSS/Roam-colored_fonts_alternative.css :)
I will delete this Gist soon.
Thank you! I just can't seem to make it work. I am sure I am doing
something wrong. I appreciate your time.
…On Wed, Apr 21, 2021 at 2:09 AM Cato Minor ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
Try this one:
https://github.com/ciceronianus/roam-customization/blob/main/CSS/Roam-colored_fonts_alternative.css
:)
I will delete this Gist soon.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3713994>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ATYR5MYYI6JDZBJDDQWTBYDTJZTYTANCNFSM4Q73XM6A>
.
--
Notice of Confidentiality: This email, and any attachments, is intended
only for use by the addressee(s) and may contain privileged or confidential
information. Any distribution, reading, copying or use of this
communication and any attachments by anyone other than the addressee, is
strictly prohibited and may be unlawful. If you have received this email in
error, please immediately notify me by email (by replying to this message)
or telephone (704) 523 -0112 and permanently destroy or delete the original
and any copies or printouts of this email and any attachments.
It is important to be aware that email communication can be relatively
easily accessed by unauthorized people and hence can compromise the privacy
and confidentiality of such communication.
Emails, in particular, are vulnerable to such unauthorized access due to
the fact that servers have unlimited and direct access to all emails that
go through them. A non-encrypted email, such as this, is even more
vulnerable to unauthorized access. Please notify Kristen if you decide to
avoid or limit, in any way, the use of email. Unless I hear from you
otherwise, I will continue to communicate with you via email when necessary
or appropriate. Please do not use email for emergencies.
In the event of an emergency dial 911 or go to your nearest emergency room.
Kristen McClure MSW, LCSW
Licensed Clinical Therapist
5200 Park Road Suite 117
Charlotte NC 28209
http://www. <http://www.charlotte-anxiety-and-depression-treatment.com>
kristen-mcclure-therapist.com
Like my page on Facebook <https://www.facebook.com/kristenmccluremswlcsw>
Have you tried #c-red ^^text^^ ? :)
Yay. Thank you so much. I'm so excited. I love the colors.That worked.
…On Wed, Apr 21, 2021 at 7:58 AM Cato Minor ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
Have you tried #c-red ^^text^^ ? :)
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3714357>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ATYR5M3B6QPNNSK3NVKH2VLTJ24XDANCNFSM4Q73XM6A>
.
--
Notice of Confidentiality: This email, and any attachments, is intended
only for use by the addressee(s) and may contain privileged or confidential
information. Any distribution, reading, copying or use of this
communication and any attachments by anyone other than the addressee, is
strictly prohibited and may be unlawful. If you have received this email in
error, please immediately notify me by email (by replying to this message)
or telephone (704) 523 -0112 and permanently destroy or delete the original
and any copies or printouts of this email and any attachments.
It is important to be aware that email communication can be relatively
easily accessed by unauthorized people and hence can compromise the privacy
and confidentiality of such communication.
Emails, in particular, are vulnerable to such unauthorized access due to
the fact that servers have unlimited and direct access to all emails that
go through them. A non-encrypted email, such as this, is even more
vulnerable to unauthorized access. Please notify Kristen if you decide to
avoid or limit, in any way, the use of email. Unless I hear from you
otherwise, I will continue to communicate with you via email when necessary
or appropriate. Please do not use email for emergencies.
In the event of an emergency dial 911 or go to your nearest emergency room.
Kristen McClure MSW, LCSW
Licensed Clinical Therapist
5200 Park Road Suite 117
Charlotte NC 28209
http://www. <http://www.charlotte-anxiety-and-depression-treatment.com>
kristen-mcclure-therapist.com
Like my page on Facebook <https://www.facebook.com/kristenmccluremswlcsw>
Hi there, This is literally the 1st time entering a comment on Github so please forgive my ignorance.
I just installed the CSS and it's pretty darn good. I just have 1 question.
Is there any way to actually hide the #c:"COLOR" in the actual roam text?
I can see that it's hidden in the image above. Was this a feature that was lost with the recent update?
Or is there still a way to use color highlights without the #c:"COLOR" showing up in the text?
You can hide all data tags starting with "c:", for example:
span.rm-page-ref[data-tag^="c:"] {
display: none;
}
I'm not able to get version 3.6 of this to work, after pasting the code in roam/css (I've not used css before, so probably doing something wrong).
I'm trying #c-red ^^test^^ and having no luck. Any pointers?
@bambooboy10001 : Sorry for late reply! Please, feel free to write me DM on Twitter, if you have any issues.
Installation:
- open [[roam/css]]
- create a new block like "Colored fonts"
- create a "code block" and set it up to CSS
- copy and paste the version 3.6 there :)
@ciceronianus Thank you for this css!
One quick question: what was the reasoning behind your decision to change the syntax from c: to c-(an update in version 3.5)?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this.
After cutting-and-pasting your css into roam/css, I tried
#c:red test
(also #c:RED, and c:red just in case :-) and got no love. Any suggestions? Apologies for my ignorance.