Syntax Highlighting and Responsive Images

` youtube : https : //www.youtube.com/watch?v=G0Oo _ 2nPfcw `

### 00 : 00 Styling Single Line Code Blocks

I setup an external CSS stylesheet to do syntax highlighting on my Hugo site. It produces a nicely styled code block with a gray background and border when called with :

{{</* highlight xml "linenos=table" */>}}

However, the gray background and border don't show up when called without the [TODO: Code shorthand span ] option :

{{</* highlight xml */>}}

The fix was to add this to the css. It produces the same look and feel with the background, border, and a little padding :

div.highlight > pre.chroma  { 
    background-color: #efefef; 
    border: 1px solid #ddd; 
    padding-left:0.6em; 
}

I haven't spent a lot of time doing CSS. So, I had to look up the basics of how to walk down a specific path of elements to target what I wanted. I ended up using the CSS Selectors](https://www.w3schools.com/cssref/css_selectors.asp) and [Element Class Selectors pages to figure it out.

### 47 : 50 Making Responsive Photos

Turns out, I already did this. I build responsive code last year. I was having trouble determining why specific image sizes were being called. I thought it might be because of resolution multipliers, but I wasn't sure. This stream was going to be when I finally went back and finished it. But, after some testing, it looks like it's good to go. I need to look back into [TODO: Code shorthand span ] for the [TODO: Code shorthand span ] attribute of ` srcset ` . I remember going through the logic, but don't remember what it does or how it works.

I did make one change to the process. When I originally wrote it, I set it up so that all the images would be served from a single directory. The idea was that that would make it a little easier to export images and to reuse them. I removed that functionality for now. Thinking about it after the stream though, I may add it back in since it'll make exporting from image applications easier since I won't have to keep finding the specific content directory for a given file... In fact, the more I think about it, the more sure I am that I'm going to add that back in.

I've got a draft post for the image handling function. Once I get it cleaned up, I'll post it along with the code. So, keep an eye out for that if you're interested.

~ fin ~