4

Is there any way to change the font color in scribble with an HTML backend?

(More specifically, I want to put a large red WARNING label in the manual for a library.)

Leif Andersen
  • 21,580
  • 20
  • 67
  • 100
  • 2
    I know you can do it with a class paired with a CSS file, but do you mean you want to create an inline style in the output? – Alexis King Jan 19 '16 at 22:53
  • Either way works for me. I would just like to have it work in the documentation for a library. (Using #lang scribble/manual.) – Leif Andersen Jan 20 '16 at 19:54

3 Answers3

2

It turns out you can do this directly in scribble without using a backend dependent solution. The trick is to use styles that have color-property.

Using elem to set the style, as shown here, you can create a colorize function, that sets the color of your text.

(define (colorize #:color c . content)
  (elem #:style (style #f (list (color-property c)))
        content))

And then you could use it like this:

@colorize[#:color "red"]{WARNING}

There is also background-color-property you can sue to set the background of the text.

Community
  • 1
  • 1
Leif Andersen
  • 21,580
  • 20
  • 67
  • 100
1

As Alexis mentioned, you can use a class paired with a Cascading Style Sheet (CSS) like so:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
   <!-- that's to link our styles to the webpage. -->
</head>
<body>
   <!-- some time later... -->
   <p class = "example">test</p> 
   <!-- the rest of the website -->

And in mystyle.css:

.example{ /* select all tags with the "example" class */
     color: #FF0000; /* change font color using hex value */
     background-color: #552222; /* change background color using hex value */
}

Now, this would be great if we were able to use multiple files. But, if you want to have it all in one file, we can send that same information in a <style> tag:

<head>
   <!-- no need to link our styles, since they're embedded in the webpage. -->
</head>
<body>
   <style>
     .example{ /* select all tags with the "example" class */
        color: #FF0000; /* change font color using hex value */
        background-color: #552222; /* change background color using hex value */
     }
   </style>
   <!-- some time later... -->
   <p class = "example">test</p> 
   <!-- the rest of the website -->

There's another way to embed it, but you shouldn't use it. Ever. This is always the correct way.

See http://www.w3schools.com/css/css_examples.asp if you need anything more from the CSS side of things.

Steven Hewitt
  • 302
  • 3
  • 12
  • This doesn’t have anything to do with Scribble, which is what was asked about in the question. – Alexis King Jan 20 '16 at 18:15
  • 1
    I appreciate your eagerness to help. But yeah, this has nothing to do with Scribble, and more to do with just coloring HTML tags. Good answer though (just to a different question.) – Leif Andersen Jan 20 '16 at 19:55
1

Manually creating a style struct containing an attributes property appears to work:

#lang scribble/base

@(require scribble/core
          scribble/html-properties)

@para[#:style (style #f `(,(attributes '([style . "color:blue;"]))))]{blue text}
stchang
  • 2,555
  • 15
  • 17