Italics and bold in posts not showing on site

So, apparently to italicize text in my blog posts I use asterisks and to bold I double that. But when I go to the post on my site, no change appears to the text. What gives?

You would need to provide us with more info here if you expect help:

  • a link to your repository if it is public
  • a link to the website / webpage where this issue was observed.
1 Like

Thank you, but I’m not asking anyone to solve the problem for me. I’m just asking for some thoughts on what it could be. If people throw out ideas, I will follow up on them. That’s a learning experience for me, and easier for you, I would think, than plowing through the code in my repository yourself!

To be clear, I have Jekyll installed and I am running Jekyll serve from the CLI. I save changes to my local repository, and I look at my web-site-in-progress using a browser at localhost:4000. Everything is peachy except bold and italics are not rendered using properly formatted asterisks or underscore characters. This is even the case when I use html tags. However, three hashtags works just fine for heading number three, for example.

Thanks in advance.

You might check to see if the HTML tags appear in the generated HTML in the _site folder. That would tell you if the tags are being stripped somehow. If the tags are present, then possibly it is a theme CSS issue.

1 Like

Thanks! I want to put my solution here, because when I searched for an answer to this question on this and other forums, I could find nothing that helped. Also, I have another question.

I did as chuckhoupt said, and found the html was working as rendered in the _site folder. But the text I was trying to italicize was nested in three divs. I checked the three divs, which might have declared some font property. But they didn’t. That took me to main.css, where I had cut and pasted into the top

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul li, fieldset, form, label, legend,table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: base-line;
}

Commenting out the font: inherit; property solved the problem. There is an interesting discussion of it here:

Stackoverflow discussion on the wisdom of font: inherit

Again, commenting out font: inherit does the trick. Italics now appear. Nothing on the site, so far, seems to be out of whack because of the change.

But, here’s the follow up question: will the absence of a font: inherit declaration wreck some sort of havoc on the future of the site?

Thank you, chuckhoupt for your helpful suggestion that lead me to a possible solution, and sent me on a knowledge pilgrimage.

It looks like you have added something similar to Meyer’s CSS Reset, but without then defining your own styles. As Meyer’s mentions, a CSS reset is just a starting point for defining one’s own bespoke styles for all elements. After the reset, you’ll need to define the typography for most elements (headers, paras, strong, italic, etc), otherwise they will be un-styled (as you found with italics).

Of course, an alternative is to find a pre-made theme to use and possibly modify (either a Jekyll Theme, or generic CSS theme).