Markdown Converter for Raycast

Markdown Converter for Raycast

5 devlogs
3h 23m
•  Ship certified
Created by obob

A Raycast extension that converts Markdown to HTML and vice versa. I used the marked.js and turndown libraries to convert the text into HTML and Markdown, and Clipboard.read() from the Raycast api to get the original text.

Timeline

Ship 1

1 payout of shell 38.0 shells

obob

about 1 month ago

obob Covers 5 devlogs and 3h 23m

I wrote a readme with installation instructions and a demo video!

Update attachment

I added a better UX design for both modes and a HUD alert now shows when the extension has finished converting. When you open the extension, an interval shows a Loading clipboard message with the number of dots at the end changing. After your clipboard has loaded, then the output is saved to your clipboard, the window closes, and a small HUD alert will show (which you can see in the video)

This will probably be my final devlog for this, and it was very fun to make (my first time using react :D) Also side note, the raycast api is really easy to use (for some reason I was expecting it to be overly complex lol)

I implemented HTML to Markdown so now you can go both ways. Since marked can't convert HTML to Markdown, I am using turndown.

The extension also now copies the result to your clipboard, however that has the result of immediately closing it, so in the next devlog I will deal with that and make it look better

I implemented markdown to HTML conversion using the marked library. It first gets the clipboard using the raycast clipboard api, then it trims the result, checks if it isnt null or undefined and gives it to marked. Then it returns the original rendered markdown and the raw html output in a code block so you can actually see the tags

I created the basic function to get the contents of your clipboard using the Clipboard.readText() function from the Raycast API. It uses the useState and useEffect hooks and runs the Clipboard call in async so I can use await. It also handles abruptly exiting simply using a variable named cancelled. Next, I will convert the returned markdown in the clipboard, convert it into html and copy it to the clipboard, probably by using Clipboard.copy()