Published
Edited
Oct 18, 2021
Insert cell
# Displaying Colored Text in Observable
Insert cell
${html}
Insert cell
<div style="color:white;background-color:${randColor()}">COLOR</div>
Insert cell
Insert cell
html = {
let str= "";
for(let i=0; i<words.length;i++){
str += `<span style="color:white; background-color:${randColor()};">`;
str += words[i];
str += `</span> `;
}
return str;
}
Insert cell
words= text.split(" ");
Insert cell
text = "Mr. Tucker stirs a little water into his bourbon and kids with his host and another man, just arrived, about their golf games. They set up a match for the weekend, a threesome looking for a fourth. Holding his drink in his right hand, Mr Tucker swings his left through the motion of a tee-shot. You'll have to give me a stroke a hole,' he says. 'I'll give you a stroke!' says his host. 'Bendover!' Laughing, the other man asks: 'Where's your boy Mark tonight?' 'I don't know,' replies the host, gathering up a trayful of drinks. Then he adds in a low growl: 'Out chasing tail probably.' They chuckle loosely at that, then shrug in commiseration and return to the living room to join their women"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more