diff --git a/README.md b/README.md
index c6d92f3..6555970 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
 # convert-usage
 
-Scripts and snippets for markdown (Obsidian & Quartz)
\ No newline at end of file
+## Obsidian snippet
+
+For my Japanese Grammar (JPG) project, I have created a style for explanation on the usage of certain grammar points. There is no simple way to make it in Markdown, so I tried to make it with the least amount of HTML possible. You can find it in `examples/sample.md`. However, for it to work, you have to import a custom [CSS snippet](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) to Obsidian, which is located in `obsidian-snippet/usage.css`. But using it, you will have this kind of result:
+
+![Obsidian screenshot](./screenshot.png)
+
+## convert-usage.py
+
+In my Quartz rendering of my markdown data, I want this kind of data to be in a callout. However, it is not possible to combine HTML and Markdown in Obsidian. For that purpose, this script encapsulates it directly in HTML. To make it both compatible in Obsidian and Quartz, and to be still easy to write, it's done with this python script. This is probably super specific and will not be of use for anybody except me!
\ No newline at end of file
diff --git a/examples/sample.md b/examples/sample.md
new file mode 100644
index 0000000..6bb7232
--- /dev/null
+++ b/examples/sample.md
@@ -0,0 +1,33 @@
+# test file
+
+## Lorem ipsum
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa eros, feugiat eu dapibus nec, fermentum vel ex. Nulla malesuada luctus pretium. Phasellus ac felis ut nisi lacinia malesuada nec vel odio. Donec tincidunt tincidunt lorem vel tempus. Nullam sed efficitur ligula, a porttitor nibh. Praesent justo dui, venenatis ac mi non, laoreet consequat libero. Aenean ut molestie mauris. Proin mattis volutpat ligula eget tincidunt. Fusce ex eros, condimentum consectetur efficitur vitae, euismod at justo.
+
+**Usage**
+
+<div class="usage">
+<div class="left">
+	<p><span class="box">item1</span></p>
+	<p><span class="box">item2</span></p>
+	<p><span class="box">item3</span></p>
+	<p><span class="box">item4</span></p>
+</div>
+	<p class="right">+ final</p>
+</div>
+
+## Phasellus tristique
+
+Phasellus tristique rutrum enim. Integer vitae ex at turpis convallis posuere nec nec erat. Cras finibus erat mauris. Suspendisse id diam at sapien luctus faucibus. Pellentesque fermentum auctor libero, ut porta orci porttitor quis. In varius at sem sed ultricies. Mauris iaculis convallis erat, congue tincidunt turpis luctus vitae.
+
+**Usage**
+
+<div class="usage">
+<div class="left">
+	<p><span class="box">アイテム１</span></p>
+	<p><span class="box">アイテム２</span></p>
+	<p><span class="box">アイテム３</span></p>
+	<p><span class="box">アイテム４</span></p>
+</div>
+	<p class="right">＋ ファイナル</p>
+</div>
\ No newline at end of file
diff --git a/obsidian-snippets/usage.css b/obsidian-snippets/usage.css
new file mode 100644
index 0000000..a070cb8
--- /dev/null
+++ b/obsidian-snippets/usage.css
@@ -0,0 +1,35 @@
+.box {
+    display: inline-block;
+    width: fit-content;
+    margin: 0.2rem;
+    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
+
+    border: 1px solid black;
+    border-radius: 0.5rem;
+}
+
+.usage {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.left {
+    padding-right: 1.7rem;
+
+    background-image: linear-gradient(black, black), linear-gradient(black, black);
+    background-repeat: no-repeat;
+    background-size: 8px 2px;
+    background-position: top right, bottom right;
+
+    border-right: solid black;
+    border-width: 0 2px;
+}
+
+.left p {
+    margin:0;
+}
+
+.right {
+    padding-left: 1rem;
+}
\ No newline at end of file
diff --git a/program/convert-usage.py b/program/convert-usage.py
new file mode 100644
index 0000000..dc13c41
--- /dev/null
+++ b/program/convert-usage.py
@@ -0,0 +1,64 @@
+import sys
+import os
+from glob import glob
+from bs4 import BeautifulSoup
+import re
+
+### Patterns ###
+
+re_usage = r'(^\*\*Usage\*\*$\n\n)'
+callout_title_html = '''
+    <div class="callout-title">
+        <div class="callout-icon"></div>
+        <div class="callout-title-inner"><p>Usage</p></div>
+    </div>'''
+
+### Open file ###
+
+def open_file(filename):
+    with open(filename, 'r', encoding='utf-8-sig') as file:
+        filedata = file.read()
+        return filedata
+
+### Write to file ###
+
+def write_file(filename, text):
+    with open(filename, 'w', encoding='utf-8-sig') as file:
+        file.write(text)
+
+### Replace ###
+
+def convert_pattern(text):
+    text = re.sub(re_usage, '', text, flags=re.MULTILINE)
+
+    soup = BeautifulSoup(text, features="html.parser")
+
+    for tag in soup.find_all('div', {"class": "usage"}):
+        new_blockquote = soup.new_tag("blockquote", **{"class": "callout notes", "data-callout": "notes"})
+        tag.wrap(new_blockquote)
+
+        calloutTitle = BeautifulSoup(callout_title_html, features="html.parser")
+        tag.insert_before(calloutTitle)
+
+    return str(soup)
+
+
+### Execution ###
+
+file_list = []
+
+if len(sys.argv) > 1:
+    path = sys.argv[1]
+    for filename in glob(path + "/**/*.md", recursive=True):
+        if (os.path.isfile(filename)):
+            file_list.append(filename)
+else:
+    print(f"Usage: python3 {sys.argv[0]} [root folder]")
+    print(f"Note: Please be careful, this software applies modifications recursively!")
+
+for filename in file_list:
+    print(f"Found file {filename}, processing...", end='')
+    data = open_file(filename)
+    text = convert_pattern(data)
+    write_file(filename, text)
+    print(f" done!")
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..481751b
Binary files /dev/null and b/screenshot.png differ