{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Yartsu","text":"

yartsu, another rich terminal screenshot utility

Documentation

NOTE: this is a currently in a beta release and the API is subject to change (feedback welcome)

Inspired by recent commits in the wonderful library rich I decided to write yartsu.

I needed to programmatically generate screenshots for documentation purposes. The new export_svg methods in rich were a godsend. So I wanted to try to make this feature a little more generalizable to program output outside of rich/python. Hopefully, you find it useful.

If you come across anything unexpected please submit an issue.

"},{"location":"#install","title":"Install","text":"
pipx install yartsu\n# OR\npip install yartsu\n
"},{"location":"#releases","title":"Releases","text":"

There is a standalone binary available for linux in the releases (Support for additional platforms is planned).

Optionally install with eget:

eget daylinmorgan/yartsu\n

Otherwise you can download an extract manually to somewhere on your path.

"},{"location":"#usage","title":"Usage","text":"

Getting a properly formatted output from a terminal screenshot is challenging.

There are three options for generating a screenshot.

If one of the below option causes you any headaches consider first trying a different option.

"},{"location":"#option-1-pipes","title":"Option 1: Pipes","text":"

Many tools that color output (i.e. grep or ls) additionally allow you to force ANSI color codes to be included even when piping output.

In these cases you can simply pipe the output directly into yartsu

ls --color=always | yartsu -w 50 -o assets/ls_color.svg\n
"},{"location":"#option-2-subprocesspty","title":"Option 2: Subprocess/Pty","text":"

With this option yartsu will deploy a subprocess and pty to run your command for you in an attempt to preserve ANSI.

Note with this option you need to separate the command you want to run with yartsu args using --.

yartsu -w 50 -o assets/ls_color.svg -- ls --color /\n
"},{"location":"#option-3-text-file","title":"Option 3: Text File","text":"

Finally, if you neither of the above options work and you can manage to preserve the codes in a plain text file you can pass this as input to yartsu.

ls --color > ls.txt\nyartsu -w 50 -i ls.txt -o assets/ls_color.svg\n

By default svgs will be saved at ./capture.svg.

Additionally, for options 1 and 3 you may want to define your own title with -t/--title. For option 2 the title will by default be the cmd ran by yartsu.

"},{"location":"#themes","title":"Themes","text":"

There are a number of themes you can use to style output. Use yartsu --list-themes to see the available options. Then you can specify the theme you want with --theme, i.e. yartsu --theme rich_default. You may also use the environment variable YARTSU_THEME.

See here a preview of the available themes

"},{"location":"#differences-from-rich","title":"Differences from Rich","text":"

For both practical and stylistic reasons the underlying code used to generate the SVG is slightly different than rich's default save_svg method. See here for the current deviation between the latest releases of each respective release.

"},{"location":"rich-diff/","title":"Deviation From Rich","text":""},{"location":"rich-diff/#versions","title":"Versions","text":""},{"location":"rich-diff/#console_svg_format-diff","title":"CONSOLE_SVG_FORMAT Diff","text":"
---\n+++\n@@ -1,5 +1,5 @@\n-<svg class=\"rich-terminal\" viewBox=\"0 0 {width} {height}\" xmlns=\"http://www.w3.org/2000/svg\">\n-    <!-- Generated with Rich https://www.textualize.io -->\n+<svg class=\"rich-terminal shadow\" viewBox=\"0 0 {width} {height}\" xmlns=\"http://www.w3.org/2000/svg\">\n+    <!-- Generated with Rich https://www.textualize.io & yartsu https://github.com/daylinmorgan/yartsu -->\n    <style>\n\n    @font-face {{\n@@ -32,6 +32,10 @@\n        font-family: arial;\n     }}\n\n+    .shadow {{\n+        -webkit-filter: drop-shadow( 2px 5px 2px rgba(0, 0, 0, .7));\n+        filter: drop-shadow( 2px 5px 2px rgba(0, 0, 0, .7));\n+    }}\n    {styles}\n     </style>\n\n@@ -43,7 +47,7 @@\n    </defs>\n\n    {chrome}\n-    <g transform=\"translate({terminal_x}, {terminal_y})\" clip-path=\"url(#{unique_id}-clip-terminal)\">\n+    <g transform=\"translate({terminal_x}, {terminal_y}) scale(.95)\" clip-path=\"url(#{unique_id}-clip-terminal)\">\n    {backgrounds}\n     <g class=\"{unique_id}-matrix\">\n     {matrix}\n
"},{"location":"rich-diff/#consoleexport_svg-diff","title":"Console.export_svg Diff","text":"
---\n+++\n@@ -70,9 +70,9 @@\n        line_height = char_height * 1.22\n\n        margin_top = 1\n-        margin_right = 1\n-        margin_bottom = 1\n-        margin_left = 1\n+        margin_right = char_width * 5 / 6\n+        margin_bottom = 20 * 5 / 3\n+        margin_left = char_width * 5 / 6\n        padding_top = 40\n         padding_right = 8\n@@ -222,8 +222,8 @@\n                x=terminal_width // 2,\n                 y=margin_top + char_height + 6,\n             )\n-        chrome += f\"\"\"\n-            <g transform=\"translate(26,22)\">\n+        chrome += \"\"\"\n+            <g transform=\"translate(32,22)\">\n            <circle cx=\"0\" cy=\"0\" r=\"7\" fill=\"#ff5f57\"/>\n             <circle cx=\"22\" cy=\"0\" r=\"7\" fill=\"#febc2e\"/>\n             <circle cx=\"44\" cy=\"0\" r=\"7\" fill=\"#28c840\"/>\n

AUTO-GENERATED by scripts/rich-diff

"},{"location":"themes/","title":"Themes","text":"

See below for example outputs of each.

cat-mochacat-macchiatocat-frappecat-lattedraculagruvbox-darkgruvbox-lightnorddimmed_monokaimonokainight-owlishrich-default

"}]}