Markdown, HTML and CSS on JAI

Guide made by

Table of Contents

Profile and Character Bio Editing

As of 4/20/24, public profiles were updated to have a new text editor similar to MS Word. Then, on 6/5/24, character bios for your bots have been given this same editor. However the most notable features added with this update is the ability to use HTML and CSS for further decorating such fields.

(Updated, April 29 2025) This guide will primarily talk about HTML and and markdown. There will be tidbits about CSS, but a guide about HTML, CSS, and overall profile customization has been made for some time now. Please go here for that.

HTML

Image Uploading and GIFs (Unavailable for now)

Due to certain circumstances, MEDIA UPLOADING IS CURRENTLY UNAVAILABLE ON JANITORAI

At the moment, it's possible to upload images. Gifs included, but it's found that when you upload a gif file they don't get uploaded as gifs, but rather as png.

If you already uploaded a gif and it uploaded as a different type, here's what to do:

1. Upload your gif to an image hosting site. Like imgur, catbox, etc
2. Get the image's direct link. The link has to end with a file type (like .png, .gif). For imgur, the image has to start with https://i.imgur as well as have the file type at the end.
3. Open </> Source Code and go to the image code that you want replaced. It should look like this:

<img src="https://pics.janitorai.com/profile-pics/737695b3-a3c6-4c56-967f-122792957fd5_9f3c9bed-9c79-4635-9710-dad70e82726d.webp" style="width: 100%; height: auto; cursor: pointer;">

4. Replace the link in there with the link you've taken from your image hosting site.
5. Save changes.

You can otherwise use the old markdown method (go here to do so). But if this does not work, you'll have to stick with the steps above.

Resizing images

As far as I can tell, if you are making your own graphics the perfect width would be 3 or 5 inches if you don't want to worry about manually resizing it. However, if you do want to manually resize it on the editor, I will show you how.

1. Upload your image onto the editor or paste your html code into </> Source Code.
2. Go to </> Source Code (if you went the upload route) and look for your image's code. Once again, here is an example:
   <img src="https://pics.janitorai.com/profile-pics/737695b3-a3c6-4c56-967f-122792957fd5_9f3c9bed-9c79-4635-9710-dad70e82726d.webp" style="width: 100%; height: auto; cursor: pointer;">
   For this guide, we'll focus on this part:
   style="width: 100%; height: auto;

3. You can change the width's 100% to 25%, 50%, 75%, or of course 100%. (I believe you can use other number percentages). 100% will make the image scale up if required to match the parent element's width. Images may also get blurry!!

   There is typically no reason to change the height size as it will automatically be set to auto; this makes it so the image height size will automatically resize proportionate to the width size, so that it will appear as the image originally would. However, you can change this as well with percentages. This may also result in distorted images.

4. Save your bio as you would, but make sure you keep the whole code as is except for what you have typed for image's width and height.

It's worth noting that it's also possible to enter a size in the px (pixel) unit instead of the percentages or even 'auto', however I wouldn't use pixel myself. Using percentages and 'auto' automatically resizes the image according to the screen size. Using pixels may result to overlapping images. I have not seen anyone try using this unit either, but I will update this section if I hear anything.

Once again, I recommend going to w3schools (a guide) to learn more about html and image sizing.

Using Line Dividers

Doing *** or --- does not give you dividers on the text editor. You'd have to use HTML for them. To add a divider, just type <hr> in source code, wherever you want the line divider to be. You can also do dotted lines or double line.

TIP: if you want a smaller space around the line divider, put the divider code before </p> of the paragraph before where the divider is supposed to be instead. OR, after pressing 'apply' on the Source Code window, reopen it and see if a new set of <p></p> that was generated before or after <hr>, then delete it.

Strikethrough

Again, using HTML let's you do strikethrough text. In source code, do <s>text</s>. Example:

Hi. This is <s>stricken through</s>
to
Hi. This is stricken through

Limiting Preview Text on Bot Cards (Character Bio Editing)

With the new text editor for character bios, we are also able to use HTML for the descriptions. HTML also affects the previews on bot cards (aka the preview of the character bio on the bot thumbnail/card). We've found that there is also a way to limit the preview to only show a select text.

Explanation:
First, we'd have to tackle how the preview works. Preview on the card, on all devices, only show the first part of the character bio. Specifically, it only shows the first 169 characters of the character bio. Characters include the letters, spaces, symbols, and even the HTML code. After 169 characters, it cuts off and puts an ellipses.

For example, I have this text in my character bio

Character preview Character preview Character preview Character preview Character preview Character preview Character preview Character preview Character preview
Character preview Character preview

If I open Source Code it would look like this instead:

1
2

<p>Character preview Character preview Character preview Character preview Character preview Character preview Character preview Character preview Character preview </p>
<p>Character preview Character preview</p>

What's in the Source Code is what is counted for the preview's character limit. So from this, it would only count and preview this part:

1

<p>Character preview Character preview Character preview Character preview Character preview Character preview Character preview Character preview Character preview </p>

Things to note:

• HTML codes (<p></p>, <strong></strong>, etc) will not be shown on the preview, and it will instead show the results (bold, italics, hyperlinked text, etc)
• If your paragraph (Everything in between <p> and </p>, including <p></p>) exceeds the 169 character limit or if the </p> isn't the 166th-169th character, the preview will not count the <p> at the start, so you will essentially have an extra three characters to work with.
• Character summary on chat card, which shows the character bio text if you have not added text to Chat Summary yet, will not display text formatting on the chat card. As of this moment, it will display what is in Source Code and will have its own individual character limit on both the chat card on the main menu and public chats, and the character bio preview in the drop down menu in My Chats.

IF you cannot come up with text to fill up the 169 characters:
You can instead spam <p></p> afterwards to fill up the space. Like so:

1
2
3
4

<p></p>
<p></p>
<p></p>
<p></p>

This will put a huge amount of space on the editor after your preview text, but if you save your work and look at your character page, the huge space won't be visible and will look like a single break in between the paragprahs.

Here's a Character Counter that you can use.

Having images to preview on bot cards

You can preview images on bot cards with the newest update if you apply the logic explained above. To do this, just do:

1. Manually upload a placeholder image directly or paste the HTML code for displaying images as the first thing in your Source Code.
   The code should look like this:
   <img src="https://files.catbox.moe/zsqkvd.png" style="width: 100%; height: auto; cursor: pointer;" draggable="true">
2. In the img source (where the link is) replace the link with a link to your image. Keep in mind that we'd still need to apply the logic we explained before, so the link and the rest of the code has to be under 169 characters.

That's all. I recommend using catbox.moe, imgur, or giphy as image hosting sites to get your links.

CSS section has long been moved to the Carrd site linked at the top of this guide

Markdown for Messages

If you don't know what markdown is: It's essentially what you do to embolden, italicize, both, and etc text. If you're on Discord, that's what you use to format your text as well. But unfortunately, not all markdown is available on the JAI site. This section is meant to show you what is available and how you can do it. (As mentioned in the section before, markdown will not be needed for your profile bio unless you're editing it through Settings. The markdown here can be used for initial message, user messages, and sample dialog.)

Bold, Italics, & Both

‣ Bold Lettering
Formatting: **text** or __text__

‣ Italic Lettering
Formatting: *text* or _text_

‣ As you saw before, you can make lettering both bold and italic lettering. Just do:* ***text***

You can also use this for links, char and user. The system will embolden, italicize, or both once you send the message/update the field.

Code blocking

‣ Code
Formatting:

1
2
3

`code`
or
``code``

This markdown normally highlights text in grey and changes the font for code blocks, but it's different for JAI. This only works in chats (not in profile and bot intro) and changes the font of the text. Below are some comparisons:

‣ Link
Formatting: [link text or title](link)

You absolutely should do this if you want a clickable link in your intro message. Just pasting the link (as far as I remember) does not make the link clickable at all. However please note that putting links in your initial message may cause the AI to attempt to send nonexistent links.

However, in intro messages, the link will appear like regular text unless you hover your cursor over it or click on it.

Reminder: Links are set up differently in the profile and character bio's text editor. Highlight your text then click the chain button to insert a link. The formatting of the links, like font color, italicization or emboldening, can also be changed using the editor's options or through the use of html and css in </> Source Code. Doing the markdown [link text or title](link) will not work.

This markdown can also be used to put images in your profile bio, and intro messages. More on this is in the next section.

Indentation for paragraphs (2 ways)

A recent JLLM update (around 28/04/25) had bots replying with indented paragraphs and a courier font. Editing the bot's message will show that it's doing it by using a specific character, as shown here:

The empty space above consists of 13 spaces (done by pressing the spacebar 13 times). This was copied from the bot's message, and was remade by manually doing it.

Note: In order for this to work, you have to put the indent on the second line or paragraph of the message. Indenting the first paragraph of the message will do nothing.

The other way of indenting is done by using a HTML entity. This can be used instead if you don't like the sudden font change in text. The one we could use is the one below for a non-breaking space:

 

It's similar to pressing the spacebar at the beginning of the line, except the space does not go away once the message is sent. It's visible in and out of editing mode.

For a bigger indent/space, just paste it over and over. Pasting it 13 times will give the same amount of space as pressing the spacebar 13 times will do, but will not change the font whatsoever.

Graphics

This section is about dividers, images, and gifs. For images and gifs, you may need to use 3rd party websites.

Dividers

By dividers, I mean the line you use to separate sections in text. You can make these by doing this:
*** or ---

This produces a thin line. If you want it thicker, simply do more on top of each other, like so:

This is usable for initial message and user message. For profile, just remember to add this in the Settings page (same with all the other markdowns). For profile bios and messages, the length of the line is as long as the width of the text box. But for bot introduction, the length of all the lines will be as long as the longest line of text you have written.

Using markdown to put in dividers is still doable for bot descriptions!

Images & Gifs

Images and gifs are added through the link markdown with a simple addition of an exclamation point:

![Image/gif text](link of image/gif)

This works in your bio (either typed in Settings or directly typed in the bio editor), and intro message.

Example:

To get a link for your image/gif, you would have to use an image hosting site (like imgur or catbox). You may also use Discord to host your images, by copying the link of whatever image you've sent as a message. You can also get any image on the internet you want by right clicking it and selecting Copy image address.

But the link would have to end with .png, .jpg, .gif or whatever file type your image is.

To get this link, click on your profile in Imgur on the top right corner of the screen. Then Images. Click on whatever image you want, then copy the one that is listed as the Markdown Link. You can paste this directly onto JAI (just don't forget the ! at the beginning.

You can also copy the HTML link and paste into your profile's </> Source Code in its text editor.

Note: the only HTML code that would work on the bio looks like this:
<img src="(link)" style="width: 100%; height: auto; cursor: pointer;">

If the HTML code looks like this to you:
<iframe class="imgur-embed" width="100%" height="288" frameborder="0" src="(link)"></iframe>
This will not work. This will put your gif on the bio but the animation will be slow and this will essentially make the gif useless. I suspect (based on personal experience) this is due to the hosting site struggling to support bigger gifs. And JAI does not support iframe yet.

Image Size and Quality

This little section is regarding your image's size and quality. This is important to note if you are especially creating your own gifs!

‣ When you are making your own image/gif for your bio, take note of the size! Three inches wide may be the best maximum size (I don't know how to convert this to px) if you don't feel like manually resizing the image through the html code in </> Source Code. This automatically fills up the profile bio width on mobile.
‣ To resize with html, just go to </> Source Code. You can set the width and height size using percentages (like 100%). You may also just put auto so it can automatically resize on whatever screen you view it on.
‣ When you are making a gif/image with text, make sure to make the font clear and bold. As on the site, the image or gif's quality may decrease.

Useful Resources!

More will be added soon!