Custom classes, improve presentation

mdbook-ditaa

@@ -56,7 +56,8 @@ DITAA_TAG = r'ditaa(?: ((?:\w|-)+))?'
 def expand_ditaa(m, context, directory):
     sourcedir = context['config']['book']['src']
     baseurl = context['config']['output']['html']['site-url']
-    filename = os.path.join(directory, (m.group(1) or next_filename()) + '.svg')
+    filename_base = m.group(1) or next_filename()
+    filename = os.path.join(directory, filename_base + '.svg')
     sys.stderr.write(f'ditaa {filename} ...')
 
     ditaa_source = m.group(2)
@@ -89,7 +90,7 @@ def expand_ditaa(m, context, directory):
     # return f'<p><img class="ditaa" alt="{filename}" src="{os.path.join(baseurl, output_prefix, filename)}"></p>\n'
 
     sys.stderr.write('inlined\n')
-    return f'<div class="ditaa">{svg}</div>\n'
+    return f'<div class="ditaa figure-{filename_base}">{svg}</div>\n'
 
 def structure(items):
     answer = []

style.css

@@ -1,3 +1,7 @@
+div.ditaa {
+    overflow: scroll;
+}
+
 svg text {
     font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
 }