In my last post Study Docusaurus Code: Static Assets , I shared my learning from exploring how Docusaurus handles static assets. I was inspired by its implementation and decided to incorporate support for static assets into my tool, txt2html. As a result, users can display their images.
The Need for Cleaner Syntax
I prefer to provide users with a cleaner method for importing pictures when composing their texts. After conducting some research, I believe that using '<' and '>' as delimiters could be a promising starting point. Consequently, I have chosen the syntax </img/test.png> and here the string /img/test.png path will correspond to static/img/test.png.
Tool Directory
└── static
└── img
└── test.png
Prototype implementation
I finished a prototype implementation which make the output HTML file display the imported picture. It used the regex match to find the string inside the "<>". In Docusaurus's implementation, there are baseUrl and url, similarly to my tool's folder path and relative path. Since my tool is developed by Python, I can use os.path.abspath to get the asset's path easily. To this point, I would say it much more close to the import or require methods used by Docusaurus.
Issues
Currently, it was hard coded the path. Later I will update so that user can define their preferred location.
Closing Thoughts
The markdown syntax demonstrates that the angle brackets are used for the links and URLs, and images are added using . Although it is easier for users to type "<>" only, I'm still considering whether the different syntax would do more harm than good.
Top comments (0)