# Code listing in Makie.jl figure

**URL:** https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395
**Category:** Visualization
**Tags:** question
**Created:** [January 11, 2022, 2:29pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395 "2022-01-11T14:29:59Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![willtebbutt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/willtebbutt/32/6790_2.png) [@willtebbutt](https://discourse.julialang.org/u/willtebbutt)
#### Post date: [January 11, 2022, 2:29pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/1 "2022-01-11T14:29:59Z")

</div>

I’m interested in producing a figure using Makie with two sections. One section with a figure, another with a code listing (Julia code, of course). Has anyone tried this before / got any thoughts about how I could go about it?

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [January 11, 2022, 2:58pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/2 "2022-01-11T14:58:06Z")

</div>

In ancient times, I used Highlights.jl + `Makie.text` to create a plot with highlighted Julia code… I can take a look if that code is still around somewhere

---

<div class="post-metadata">

### Author: ![willtebbutt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/willtebbutt/32/6790_2.png) [@willtebbutt](https://discourse.julialang.org/u/willtebbutt)
#### Post date: [January 11, 2022, 3:00pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/3 "2022-01-11T15:00:12Z")

</div>

That would be amazing, thank you!

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [January 11, 2022, 5:22pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/4 "2022-01-11T17:22:16Z")

</div>

Ok, this was interesting…Against all odds, I actually found the code sample…  
It was almost 100% still working 😮 But, Makie’s 1 color per char actually regressed, so I had to fix that: [make it possible to have one color per glyph by SimonDanisch · Pull Request #1582 · MakieOrg/Makie.jl · GitHub](https://github.com/JuliaPlots/Makie.jl/pull/1582)  
But with that PR this works now:

```julia
using GLMakie

using Colors, Highlights
using Highlights.Format
using Highlights.Tokens
using Highlights.Themes

import Highlights.Themes: has_fg
css2color(str) = parse(RGBA{Float32}, string("#", str))
css2color(c::Themes.RGB) = RGBA{Float32}(c.r/255, c.g/255, c.b/255, 1.0)

function style2color(style, default)
    if has_fg(style)
        css2color(style.fg)
    else
        default
    end
end

function render_str(
        ctx::Format.Context, theme::Format.Theme
    )
    defaultcolor = if has_fg(theme.base)
        css2color(theme.base.fg)
    else
        RGBA(0f0, 0f0, 0f0, 1f0)
    end
    colormap = map(s-> style2color(s, defaultcolor), theme.styles)
    tocolor = Dict(zip(Tokens. __TOKENS__ , colormap))
    colors = RGBA{Float32}[]
    io = IOBuffer()
    for token in ctx.tokens
        t = Tokens. __TOKENS__ [token.value.value]
        str = SubString(ctx.source, token.first, token.last)
        print(io, str)
        append!(colors, fill(tocolor[t], length(str)))
        # push!(colors, tocolor[t])
    end
    String(take!(io)), colors
end

function highlight_text(src::AbstractString, theme = Themes.DefaultTheme)
    io = IOBuffer()
    render_str(
        Highlights.Compiler.lex(src, Lexers.JuliaLexer),
        Themes.theme(theme)
    )
end

src = """
function test(a, b)
    const a = sin(a) + 2.0
    return a 
end
"""

str, colors = highlight_text(src)

text(str, color=colors)

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/3/f/3f388656b00051fa391fbd1314ddd4027c366b81.png)

---

<div class="post-metadata">

### Author: ![willtebbutt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/willtebbutt/32/6790_2.png) [@willtebbutt](https://discourse.julialang.org/u/willtebbutt)
#### Post date: [January 11, 2022, 5:29pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/5 "2022-01-11T17:29:20Z")

</div>

Incredible. Thanks again for sorting this out!

---

<div class="post-metadata">

### Author: ![willtebbutt](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/willtebbutt/32/6790_2.png) [@willtebbutt](https://discourse.julialang.org/u/willtebbutt)
#### Post date: [January 11, 2022, 6:14pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/6 "2022-01-11T18:14:27Z")

</div>

Out of interest, what’s Makie’s release cycle like? Will you issue a patch release when your PR is merged, or will it take a while for a new release with the PR included?

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [January 26, 2022, 5:30pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/7 "2022-01-26T17:30:38Z")

</div>

Usually we release patch releases after merging a PR… But the change to the mono repo slowed us down a bit - but this change should be released now and I hope to be faster going forward.

---

<div class="post-metadata">

### Author: ![lazarusA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lazarusa/32/6571_2.png) [@lazarusA](https://discourse.julialang.org/u/lazarusA)
#### Post date: [February 22, 2022, 8:54pm UTC](https://discourse.julialang.org/t/code-listing-in-makie-jl-figure/74395/8 "2022-02-22T20:54:54Z")

</div>

> [@sdanisch](#):
>
> `import Highlights.Themes: has_fg`

does not work, it seems to be no longer available. However setting to `true` where `has_fg` appears also does the work 😃
