# Highlighting single word within markdown code block
**URL:** https://talk.jekyllrb.com/t/highlighting-single-word-within-markdown-code-block/5758
**Category:** Uncategorized
**Created:** [March 13, 2021, 3:12pm UTC](https://talk.jekyllrb.com/t/highlighting-single-word-within-markdown-code-block/5758 "2021-03-13T15:12:01Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@awa5114](https://talk.jekyllrb.com/u/awa5114)
#### Post date: [March 13, 2021, 3:12pm UTC](https://talk.jekyllrb.com/t/highlighting-single-word-within-markdown-code-block/5758/1 "2021-03-13T15:12:01Z")
I am trying to highlight a single word in a code block generated by `kramdown`. For reasons not worth explaining here, I would like to do this by explicitly embedding the html `span` element within the code block in the markdown file. The `kramdown` [docs](https://kramdown.gettalong.org/syntax.html#html-spans) appear to support embedding html inside block and span level markdown but I can’t quite seem to get this work. Here is my `content.md` markdown file:
```
~~~
def function():
print('hello')
~~~
```
Once I compile using `kramdown content.md>content.html` on a windows machine, I expect to get the following:
```
def function():
print('hello')
```
However what I get instead is something like this:
```
def <span style="color: red;" markdown="span">function</span>():
print('hello')
```
Which is not what I want. I have tried using the `markdown` attribute with all of `"0"`, `"1"`, `"span"` and `"block"` as values to no avail. What am I missing here?
---
### Author:  [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)
#### Post date: [March 13, 2021, 3:55pm UTC](https://talk.jekyllrb.com/t/highlighting-single-word-within-markdown-code-block/5758/2 "2021-03-13T15:55:22Z")
The problem is that Markdown code-blocks display the code as text, so any HTML inside a code-block will appear as-is on the web page. I.e. the code will be automatically quoted to prevent the browser from interpreting it as HTML.
One work-around is to forgo Markdown and output the `` tags yourself. However, you’d have to be careful to manually quote special HTML characters, like `<` and `>`. That might make this work-around impractical.
Note that Kramdown can perform code high-lighting, which automatically adds semantic spans to code for highlighting. For example, in the following, the function name has a span of class `hljs-title`, which is styled as bold red on this site:
```nohighlight
~~~python
def function():
print('hello')
~~~
```
```python
def function():
print('hello')
```
---
### Author:  [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)
#### Post date: [March 13, 2021, 8:45pm UTC](https://talk.jekyllrb.com/t/highlighting-single-word-within-markdown-code-block/5758/3 "2021-03-13T20:45:27Z")
hljs is highlight.js
[https://highlightjs.org/](https://highlightjs.org/)
If your problem is HTML \< and \> getting escaped incorrectly
Maybe you could store your values as frontmatter
Then have it appear on the page as literal text.
I am not familiar with the Kramdown flow though
Also consider using Jekyll `highlight` tag or code fence blocks which is Liquid and gets specific languages.
---
### Author:  [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)
#### Post date: [March 13, 2021, 10:39pm UTC](https://talk.jekyllrb.com/t/highlighting-single-word-within-markdown-code-block/5758/4 "2021-03-13T22:39:37Z")
Ah, you’re right @MichaelCurrin – I got myself confused by looking at how this Discourse forum renders code-blocks. In Jekyll, Kramdown uses Rouge to highlight code blocks, which adds classes like `kd` and `nx` to keywords and names.