Forum Markdown with HTML

Apparently, this is now in Guides and Tutorials, so I’ll make a brief description:

Aligning Text


You can use divs, and I don’t know all the properties of divs that are changeable in discourse (or that this forum’s owners permitted), but you can change the alignment like so:

<div align="right">
    <!-- actual content goes here... -->
</div>

Other permissible values include “left”, “center”, and “justify”. Typical word stuff.

Pictures inside Tables


You can place images inside tables. Using the default method on the tables doesn’t work. Typing this:

|Column 1|Column 2|Column 3|
|–|–|–|
|image|Image 2|Image 3|

Results in this:

Column 1 Column 2 Column 3
![image 67x80, 50%](upload://9FHXtINCZepoSmSBbJRMXRGUNNF.png) Image 2

Typically this would be solved by leaving a space, but Markdown’s table thing interprets this as making a new row, so it’ll just shift the content down. There are two ways to solve this:

  1. Use an HTML table.
  2. Use an <img> tag.

I don’t think the <img> tag can access files in your computer. It needs a link to the picture that you want to upload. You could just go to photos.google or any other similar service to create a sharable link for any image in your computer, but it’s a lot less convenient. Just keep that in mind.

Making an HTML table is less convenient than Markdown’s table making function, but it allows you to use markdown’s in-built picture uploading function since it doesn’t interpret a space bar as a new row. Here’s how they look:

The table tag’s function is self-explanatory. <tr> stands for “table row”, and makes a single row for the table. <th> stands for “table header” and make a table header column. <td> stands for “table data” and marks the normal data in a table.

Two other tags that don’t appear here, <thead> and <tbody>, mark an entire set of rows as the header and an entire set of rows as the body of the table respectively. <tfooter> also exists (I wonder what that does), but barely anyone uses footers here.

Adding pictures to the HTML tables is as easy as pressing enter and uploading the pictures.

Will update this if I deem it necessary.


Forum Formatting Experimentation

Just as the above says, this is for formatting experimentation. Might not actually use them.
Previous Post Next Post

Click to go to the thing named “Hyperlinked”

dfdfd

The domestic dog ( Canis familiaris or Canis lupus familiaris )[4] is a domesticated descendant of the wolf. The dog derived from an ancient, extinct wolf,[5][6] and the modern grey wolf is the dog’s nearest living relative.[7]

bro just give me the ability to add floating images, don’t wanna use the ugly tables as a bypass >:(
the tables aren’t perfect, even. Look at what happens when there’s too much text in the column:

The domestic dog ( Canis familiaris or Canis lupus familiaris )[4] is a domesticated descendant of the wolf. The dog derived from an ancient, extinct wolf,[5][6] and the modern grey wolf is the dog’s nearest living relative.[7] The domestic dog ( Canis familiaris or Canis lupus familiaris )[4] is a domesticated descendant of the wolf. The dog derived from an ancient, extinct wolf,[5][6] and the modern grey wolf is the dog’s nearest living relative.[7] The domestic dog ( Canis familiaris or Canis lupus familiaris )[4] is a domesticated descendant of the wolf. The dog derived from an ancient, extinct wolf,[5][6] and the modern grey wolf is the dog’s nearest living relative.[7]

IT CENTERS. EWW :nauseated_face:

Hyperlinked

Read hidden text

Being here means you followed the instructions above.


fire_1

water_1

earth_1

wind_1

A table depicting the Aristotelian elements as seen in nature.

i love that i can edit this to see the formatting

HOW DO YOU DO MIDDLE ALIGNED TEXT

He’s been enlightened

<div align="center">
</div> 

Place whatever you want to center inside the div. That’s basically how you do it.
To right-align it, just change center to right.

Demonstration
Another demonstration.

thank you

for

this

information

1 Like

np.
should also probably say this, but markdown doesn’t perfectly work inside HTML tags.
so if I do this:

<div align="center">
  *Hi*
</div> 

It looks like this:

*Hi*

You have to leave a space immediately after the div tag, something like this:

<div align="center">

  *Hi*
</div> 

to get this:

Hi

I don't personally know why, but maybe someone with more technical knowledge can explain this one.

EDIT: What this also means is that you can’t use markdown to put images in tables. You either have to use an <img> tag or use a HTML table.

Those basically look like this:

<table>
  <tr>
   <th> . . . </th>
   <th> . . . </th>
  </tr>
  <tr>
   <td> . . . </td>
   <td> . . . </td>
  </tr>
</table>

empty donkey picture
. .

Z

2 Likes

thank you so much

1 Like

wtf

moved this to a new topic bc i think it’s deserving of it

Wait can we do justified?

Testing. Testing. Testing. Testing. Testing. Testing. AAAAAAAAAAAAAA Testing. Testing. Testing. Testing. Testing. Testing. 123456781234567812345678123456781234567812345678 123456781234567812345678 :slight_smile: 11111111111111111111111111111111111111111111111111111111111

Can you copy the whole thing into

Code comment form <so that we can see the HTML commands>

why tf was I notified
image I’ve never even commented here wa

Are you watching the category?

no I’ve never even commented here WA

Justified is a weird thing

1 2 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 5 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 5 6 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 5 6 7 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 5 6 7 8 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 5 6 7 8 9 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

1 2 3 4 5 6 7 8 9 0 blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank

<div align="center">

Forum Formatting Experimentation


<small> <i> Just as the above says, this is for formatting experimentation. Might not actually use them.</i> </small>

`

<div align="right">
<table>
<thead>
<tr>
<th> Previous Post </th>
<th> Next Post </th>
</tr>
</thead>
<table>
</div>
`

``

[Click to go to the thing named "Hyperlinked"](#chapter-1)

dfdfd

|||
| :-- | :-- |
|<img src="https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg" width="212">| The **domestic dog** ( *Canis familiaris* or *Canis lupus familiaris* )[<sup>[4]](https://en.wikipedia.org/wiki/Dog#cite_note-FOOTNOTEWangTedford20081-4) is a [domesticated](https://en.wikipedia.org/wiki/Domestication) descendant of the wolf. The dog derived from an ancient, extinct wolf,[<sup>[5]](https://en.wikipedia.org/wiki/Dog#cite_note-Bergström2020-5)[<sup>[6]](https://en.wikipedia.org/wiki/Dog#cite_note-Frantz2020-6) and the [modern grey wolf](https://en.wikipedia.org/wiki/Wolf) is the dog's nearest living relative.[<sup>[7]](https://en.wikipedia.org/wiki/Dog#cite_note-freedman2017-7)

<small> bro just give me the ability to add floating images, don't wanna use the ugly tables as a bypass >:(
the tables aren't perfect, even. Look at what happens when there's too much text in the column: </small>

|||
| :-- | :-- |
|<img src="https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg" width="212">| The **domestic dog** ( *Canis familiaris* or *Canis lupus familiaris* )[<sup>[4]](https://en.wikipedia.org/wiki/Dog#cite_note-FOOTNOTEWangTedford20081-4) is a [domesticated](https://en.wikipedia.org/wiki/Domestication) descendant of the wolf. The dog derived from an ancient, extinct wolf,[<sup>[5]](https://en.wikipedia.org/wiki/Dog#cite_note-Bergström2020-5)[<sup>[6]](https://en.wikipedia.org/wiki/Dog#cite_note-Frantz2020-6) and the [modern grey wolf](https://en.wikipedia.org/wiki/Wolf) is the dog's nearest living relative.[<sup>[7]](https://en.wikipedia.org/wiki/Dog#cite_note-freedman2017-7) The **domestic dog** ( *Canis familiaris* or *Canis lupus familiaris* )[<sup>[4]](https://en.wikipedia.org/wiki/Dog#cite_note-FOOTNOTEWangTedford20081-4) is a [domesticated](https://en.wikipedia.org/wiki/Domestication) descendant of the wolf. The dog derived from an ancient, extinct wolf,[<sup>[5]](https://en.wikipedia.org/wiki/Dog#cite_note-Bergström2020-5)[<sup>[6]](https://en.wikipedia.org/wiki/Dog#cite_note-Frantz2020-6) and the [modern grey wolf](https://en.wikipedia.org/wiki/Wolf) is the dog's nearest living relative.[<sup>[7]](https://en.wikipedia.org/wiki/Dog#cite_note-freedman2017-7) The **domestic dog** ( *Canis familiaris* or *Canis lupus familiaris* )[<sup>[4]](https://en.wikipedia.org/wiki/Dog#cite_note-FOOTNOTEWangTedford20081-4) is a [domesticated](https://en.wikipedia.org/wiki/Domestication) descendant of the wolf. The dog derived from an ancient, extinct wolf,[<sup>[5]](https://en.wikipedia.org/wiki/Dog#cite_note-Bergström2020-5)[<sup>[6]](https://en.wikipedia.org/wiki/Dog#cite_note-Frantz2020-6) and the [modern grey wolf](https://en.wikipedia.org/wiki/Wolf) is the dog's nearest living relative.[<sup>[7]](https://en.wikipedia.org/wiki/Dog#cite_note-freedman2017-7)

IT CENTERS. EWW :nauseated_face:

# Hyperlinked <a id="chapter-1"> </a>

[details="Read hidden text"]
----
Being here means you followed the instructions above.
[/details]

You know, if you want to see the code comment of any post, just change the URL a bit.

For a URL like this:
https://forum.arcaneodyssey.dev/t/forum-markdown-with-html/61701/13,
just change the t/post-name-goes-here/ section into raw.

So it’d look like this at the end:
https://forum.arcaneodyssey.dev/raw/61701/13

And just like that I can see exactly what you wrote.

1 Like