Square Bracket CSS format

Customization
1

Hello,

I am a new comer to logseq and interested in CSS customization.

As far as I know, with the double square brackets “[[” “]]” pages can be created in Logseq, while single square brackets “[” “]” are used to create hyperlink, if they are followed by parentheses “(” “)”.

My question is about the colorizing contents or strings in the single square brackets without following hyperlink in “(” “)”. Is it possible? Or it could result in collision with the usage of double square brackets?

What should I do to edit the custom.css in order to colorizing only the contents of single “[” “]” oder “(” “)” without altering the default color of “[” “]” and “(” “)” themselves?

Thank you for reading my question.

2

Welcome.

  • Plain text cannot be formatted, unless placed inside html elements (usually of some css class).
  • Logseq uses the following html elements when rendering:
    • single square brackets markdown links: text placed inside anchor elements
    • double square brackets page links: placed inside span elements
  • The code for those html elements is neither saved nor visible, but it is there during browsing.
    • Check the actual used code with Ctrl + Shift + i
  • You can likewise format any text or even single character, by:
    • placing it inside anything supported by either:
    • then use custom.css to define css rules that target the used html elements
3

Thanks for your quick response.

I followed your instruction and found some html elements.
Do you mean I should check the red-marked area as the snapshot shows?
I found the class but I cannot find the css for that class.

Textarea
Textarea1920×1032 220 KB

I can change the plain text color within double square brackets “[[” “]]”, but not works on single square bracket “[” “]”.
What I wanna have is the effect like obsidian, page links and markdown links can be in color and shown in different way, as the following snapshot presents.
Example
Example1920×1032 32.4 KB

I will appreciate any further instructions given to me very much.

4
  • Add the following css rule in file custom.css:
    span.special {
  color: orange;
}
  • Then type the following in a block:
    [:span.special "["]test[:span.special "]"]
  • It should render like this: image
  • Then type the following in a block:
    [<span class="special">test</span>]
  • It should render like this: image