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.

This section of the guide is meant to show what HTML and CSS codes can be done. But if you want to learn about HTML and CSS in general, I recommend going to a site like w3schools or something similar.

It is still possible to edit your profile bio using markdown. You can do so in Settings.

HTML

Image Uploading and GIFs

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

This section talks a bit about CSS. I will not be putting a whole guide on how to code in CSS, that's beyond my expertise lol.

CSS is a coding language/markup language that works in tandem with HTML. Howeverm, for JanitorAI users, CSS cannot be placed in the Source Code window.

Here are the necessary steps in using CSS on JAI:

1. Go to Settings.
2. Scroll down to the About Me section.
3. Paste your CSS code at the very bottom of the About Me box, or wherever the part of the code that is supposed to show a specific output is meant to be placed in.
4. Press update profile.

If you do not have experience in coding with CSS, don't worry, I've assembled a page of codes you can use as is or as a basis for coding: CSS for JAI

Please make sure you read the Value Legend or to regularly go back to it in that document first.

PLEASE READ BEFORE ALTERING YOUR ABOUT ME FIELD:

• The About Me field was originally the profile's bio field, aka where you put your profile bio. You will see that this already has what you have entered in your public profile bio, or what was in the editor's source code. DO NOT delete anything that is already in your About Me as it will delete your profile bio.
• Make sure to copy every CSS coding you've put in your About Me and save it somewhere before editing your profile with its built in text editor, as saving any changes on the text editor may cause the css coding to delete.
• CSS only affects your profile page. This cannot be used to affect the appearance of your bot page or your bot cards outside of your profile page.
• All codes included in the css code page are the 'base' codes, meaning you can further modify them to your heart's content if you know how to.

DISCLAIMER As mentioned earlier, these codes do not affect anything else outside of the profile page. However, due to how the site is structured, when trying to change a certain aspect of your profile you'll find that some other elements will be affected too. Such as the buttons leading to the site's TOS and the others alongside it may disappear, or the font colors of other text may unintentionally change. Again, changes done through CSS will only affect your profile page, so this warning is put in place to assure you you didn't break anything.

Troubleshooting/Common Errors

After a few days of observation here are a few things that I've seen happen when using the css codes I provide. Feel free to share errors you've found that isn't included here (preferably DM in discord).

• The code isn't working/is not working correctly! - Let's get this out of the way:
  • A common error coders have when they code; there's a missing character in your code. Make sure you didn't forget a semicolon (;) or a curly bracket ({ or }) or any other character.
  • You have different class IDs as others/as the code that was given. By class ID, i mean this: .css-sdkhsd. If this is the case, you'd have to right-click then press Inspect Element to look for the class ID.
  • You didn't put it on the About Me field in the settings page. Rewriting this here because many of you skip over instructions -.- /j. The Source Code in the text editors does not save non-html coding.
  • You forgot to put your code in between <style> and </style>.
  • You didn't put the whole code. Maybe you got code from my collection or from others, but you thought that some parts of it were unneeded or you unintentionally cut things out. Paste in the whole thing, and maybe ask someone knowledgeable in css about the purpose of the other parts.
  • There are characters that shouldn't be in there. Maybe there's a random slash in there, or you accidentally left out a semicolon. Frick semicolons bro
  • Conflicting pieces of code. Perhaps you put in something to remove a gradient, but it shares the same class ID of an element you were going to modify. Same as trying to make something visible when you had another thing making it invisible. Make sure to take note of what you put in your About Me section.
  • You copied codes from my collection, but failed to change the capitalized words to the correct values. Each code should have instructions on what to replace.
• Opening my profile after adding code sends me straight to the reload page!
  • This is most likely because the code you've put in is incorrect, thus resulting in an error. I've only seen one case of this happening, and it's because someone had been messing with the code for the audio player. I am not sure what specific things triggers this, but here's how to stop your profile from directing you to the reload page.
    • Go to the main page of the website.
    • Access the Settings page through the top right corner drop down menu.
    • Delete the code that likely caused this issues.
      Afterwards, look over your code to see what could have made it go awry.

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 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
Formatting:

1
2
3

`code`
or
``code``

This markdown normally highlights text in grey and changes the font for coding, 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.

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.

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!