6

I have a JSON code snippet that I like to include into my LaTeX document:

"builders": [ { "type": "test", "image": "ubuntu:latest", "changes": [ "EXPOSE 123 456", "CMD [\"/tmp/entrypoint.sh\"]" ], "commit": true } ]

I'd like to highlight it the similarly to how Visual Studio Code highlights it:

  • Same colors for keywords
  • Same amount of indentation
  • Preferably these vertical lines if possible
  • Line numbers on the left side (not shown in the image)
  • A single frame around the final code block
  • No Black background color, obviously

Example for VSCode

I heard about the minted as it seems to be a good choice for this task. However, my attempts look horrible, not close at all to the picture at all.

I had lot's of problems with highlighting the key and values differently, because both seem to be interpreted as string - and would therefore be highlighted in the same color when the string color is specified.

Also I don't want to write down every value on the right side as keyword down... There must be a way to automatically highlight the key and the value differently, based of some logic. Also no idea at all about the vertical lines. Also could not get the line numbers working. Furthermore the font looks totally different, is there a way to use a similar looking one?

Since I couldn't get a proper result with the minted package I also played around with the listings package, still does not look good. This is what I got so far:

\definecolor{keycolor}{HTML}{569CD6} \definecolor{valuecolor}{HTML}{FF0000} \lstdefinelanguage{js}{ keywords={type,image,changes, CMD, WORKDIR, EXPOSE, builders, commit}, keywordstyle=\color{keycolor}\bfseries, keywords=[2]{test}, keywordstyle=[2]\color{valuecolor}\bfseries, sensitive=false, morecomment=[s]{/*}{*/} } \lstset{ language=js, frame=single, extendedchars=true, basicstyle=\footnotesize\ttfamily, showstringspaces=false, showspaces=false, tabsize=2, breaklines=true, showtabs=false }

and then:

\begin{lstlisting} "builders": [ { "type": "test", "image": "ubuntu:latest", "changes": [ "EXPOSE 123 456", "CMD [\"/tmp/entrypoint.sh\"]" ], "commit": true } ] \end{lstlisting}

Which looks like this:

My attempt

How can I make it as close to the VSCode example as possible? I am fine with using whatever package works best for this task.

Improve this question
3
  • 1
    You say you want to use minted. But you do not use minted's commands (you are using the ones from listings). Which package do you really want to use? Commented Dec 12, 2019 at 8:01
  • @TeXnician I'd like to use whatever works best for this task. I first tried listings because I did read about it here: tex.stackexchange.com/questions/336919/… Yeah, minted might be the better option. I am fine with any solution that comes as close as possible to the example picture. I updated my question. Commented Dec 12, 2019 at 10:12
  • Have you even tried minted? You can choose any Pygmentize style you want. Thus, simply try out the color scheme you like best at pygments.org/demo and then use it in minted. Commented Dec 14, 2019 at 17:28

1 Answer 1

Reset to default
1

All your requirements except the indentation guide are possible out of the box with minted. If you need the indentation guide, you can manually add the vertical lines with escapeinside and tikzmark.

\documentclass{article} \usepackage{tikz} \usetikzlibrary{tikzmark} \usepackage{minted} \newminted{JSON}{linenos,frame=single,framesep=10pt,style=autumn,escapeinside=??} \ExplSyntaxOn \int_new:N \g_kyu_JSONcode_int \AddToHook{env/JSONcode/before}{\int_incr:N \g_kyu_JSONcode_int} \clist_new:N \g_kyu_JSONmarks_clist \NewDocumentCommand { \JSONmark } { m } { \tikzmark{JSON-\int_use:N \g_kyu_JSONcode_int-#1-begin} \clist_gput_right:Nn \g_kyu_JSONmarks_clist { #1 } } \NewDocumentCommand { \finishJSONmark } { m } { \tikzmark{JSON-\int_use:N \g_kyu_JSONcode_int-#1-end} } \AddToHook{env/JSONcode/after} { \begin{tikzpicture}[remember~picture] \clist_map_function:NN \g_kyu_JSONmarks_clist \kyu_drawJSONmark:n \end{tikzpicture} \clist_gclear:N \g_kyu_JSONmarks_clist } \cs_new_protected:Nn \kyu_drawJSONmark:n { \draw[overlay,-,line~width=0.5pt,gray!50,shorten~>=1em,shorten~<=0.3em] (pic~cs\c_colon_str JSON-\int_use:N \g_kyu_JSONcode_int-#1-begin) -- (pic~cs\c_colon_str JSON-\int_use:N \g_kyu_JSONcode_int-#1-end); } \ExplSyntaxOff \begin{document} \begin{JSONcode} ?\JSONmark{1}?"builders": [ ?\JSONmark{2}?{ "type": "test", "image": "ubuntu:latest", ?\JSONmark{3}?"changes": [ "EXPOSE 123 456", "CMD [\"/tmp/entrypoint.sh\"]" ?\finishJSONmark{3}?], "commit": true ?\finishJSONmark{2}?} ?\finishJSONmark{1}?] \end{JSONcode} \end{document}

JSON code

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.