How do we post block-type content in topics these days?

I've just been reading a thread in the Developer Community club in which Allen posted some Python code to help a member who's having problems. I'm guessing that Allen copied that content from a Python console window but all the indentation was lost in the process...

https://www.chess.com/clubs/forum/view/twitch-bot-api-requests-being-blocked#comment-116395280 

I remember some years ago using the <pre> ('preserve') HTML tags to ensure all spacing was kept when it was posted, so that it's displayed correctly in a browser but when I tried it again recently the <pre> tags were stripped out by the site's posting-editor.

Anyone know of a way of posting 'block-type' content while preserving all spacing?

* Under normal conditions a browser will strip all whitespace that's considered superfluous.

Just remembered, I was trying to illustrate the problem that having superfluous spaces in club names can cause when trying to locate its home page.

"Team USA" is a classic example with a double-space between the words. If you view any topic in which that club name appears it's displayed with just a single space! Copy & paste it into the club search field and you'll never find the club - you have to manually add an additional space.

But every time I tried to display it with a double-space the browser stripped the second space.

* Team Morocco is even more fun to play with because it has 5 spaces between the words.

The site posting was changed a couple of years ago. All extra white space is now stripped automatically (including indent tabs). When I posted my function for endpoint retrieval it included all my indents but sadly C.C know better. It's a server storage issue I suspect.

I think those of us who post blocks of code into club threads would find it a lot more useful if all indentation and spacing was preserved?

Yep, this has been driving me a little nuts too. 😅 It looks right in the editor, but then you hit Submit and boom — all your spacing vanishes. Here's what I found out after experimenting:

✅ Forum Topic Workaround (not comments):

You can still preserve indentation in forum topics by:

1. Clicking the HTML button in the post editor.

2. Wrapping your code in <pre> and <span style="font-family: monospace;">.

3. Using   (non-breaking spaces) for manual indentation.

Here’s a sample you can paste into the HTML editor of a forum post:

Then just switch back to visual mode to preview. It should preserve everything nicely on submit. ✅

def greet(name):

    print(f"Hello, {name}!")



def add(x, y):

    return x + y



greet("ChessDev")

print(add(2, 3))

Now I just need a tool that converts nicely formatted Python into this HTML/ /line-break–filled mess. 🧹🐍
Because clearly the hardest part of coding is posting the code on Chess.com without it turning into alphabet soup. 😩

😩 I’ve been posting lots of Python without checking formatting…
It’s all been steaming #!@% 💩

About this Allen...

1. Clicking the HTML button in the post editor.

Where exactly is that button because I can't see it (I'm viewing in Chrome)?

At this point I would consider just using pastebin links instead of bothering with the above.

Here is the icon it is labeled "Source Code"

Lucky for us, we're coders — a couple lines of code and we’ve got a postable, consistent version. 💾💬 A lot of folks won’t click links anyway (lazy, fear, who knows), so inline is still king. 👑

Key there is 'New topic'. Only available for 1st post in forum.

Yes after that it is cut and paste. Also you do not need to post the forum topic. Just cut and paste it on someone else's forum as a comment.

You can paste this any where. Except Notes and Chats.

Same goes for images — I always hear “how do I embed an image?” or “where do I host it?” Easy answer:

Here’s how to embed and reuse images on Chess.com — the easy way (You will need permission from Chess.com support to automate this): We are NOT using automation here, but but this would make it possible.

1. Create a New Forum Topic 

2. Upload as many images as you need using the image button.

   

3. Switch to the “Source” tab (looks like <> ). You'll see this on the source tab.
   <p><img src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/AlAlper/phpvgj5c76afll3ekTns8W.jpg" style="display: block; margin: 0 auto;" class="imageUploaderImg" alt="" width="248" height="142" /><img src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/AlAlper/phptqirj2thgrcjerPKZKr.jpg" style="display: block; margin: 0 auto;" class="imageUploaderImg" alt="" width="174" height="174" /><img src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/AlAlper/phpmg4tjndlofojf1IhpXO.jpg" style="display: block; margin: 0 auto;" class="imageUploaderImg" alt="" width="153" height="153" /><img src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/AlAlper/php3knffcetsaf3aYxEO3c.jpg" style="display: block; margin: 0 auto;" class="imageUploaderImg" alt="" width="176" height="176" /><img src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/AlAlper/phph1l737udgklkf4khsBT.jpg" style="display: block; margin: 0 auto;" class="imageUploaderImg" alt="" width="476" height="159" /><br /><br /><br /><br /></p>

4. Find the URLs where Chess.com is hosting your images — they’ll look like <img src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/AlAlper/phpvgj5c76afll3ekTns8W.jpg" style="display: block; margin: 0 auto;" class="imageUploaderImg" alt="" width="248" height="142" />

5. Copy those image URLs and reuse them anywhere that accepts HTML (forum posts, blogs, notes, announcements, etc.).

6. Cut and paste is your friend. 💻 Once you have the image embedded, you can cut and past the image into the all most any iFrame editor.

No re-uploading, no third-party hosts, no headaches. Just one and done. ✅

Yes, anyone else sees only this...

Chat GPT says

🔎 Who Can See the "Source Code" Button?

✅ Visible to:

• Club Admins and Coordinators (so you should see it)

• Users creating a New Forum Topic

• Sometimes visible when editing your own post (especially the first post in a thread)

• Users with sufficient trust level or posting history (Chess.com has subtle reputation systems that affect this)

❌ Not visible to:

• Non-members of a club

• Members without sufficient privileges if the club has restricted posting

• Anyone replying to a topic (typically the reply editor is simplified and lacks the source option)

• Mobile web users or limited devices — the button may be hidden or require a wider screen

Well I'm unable to see that button, coordinator or not!

Ok I will find you answers Where there is a will there is a way. The comment below WORKED. It was injected in to the page using inspection.

Notice the correctly indented code sections. Done without a Source button and in your forum comment directly.

What I did.

Steps:

1. Get crap from Chat 💩

2. Tell Chat: “Format this as HTML using non-breaking spaces ( ) to preserve indentation.”

3. Watch it reply with:

   Absolutely! Here's your entire post turned into a single HTML snippet, with all code segments converted to use   (non-breaking spaces) for indentation preservation — ready to inject into a TinyMCE forum reply using Option 3:

4. Copy the snippet

5. Open Firefox or Chrome → Right-click inside the forum reply box → Inspect

6. Find the TinyMCE <iframe>

7. Edit the inner <body>

8. Paste HTML

9. Click the editor again to register the change

10. Post

11. Boom 💥

Yes, it’s a hack.
Yes, it’s the wrong way.
But it works.
And sometimes that’s enough. 🫡

WARNING ChatGPT Generated instructions Has ERRORS BUT kick it and you can get it to work.

🛠 OPTION 3 — Inject HTML into TinyMCE Forum Comment (Advanced DevTools Hack)

⚠️ Requirements:

• Desktop browser (Chrome or Firefox recommended)
• Some HTML knowledge
• A Chess.com forum thread you can reply to

✅ Step-by-Step:

1. Go to the Forum and Click “Reply”

Open any Chess.com forum thread. Click the “Reply” button to open the TinyMCE editor.

2. Open DevTools

Right-click inside the editor area. Select “Inspect” (in Chrome) or “Inspect Element” (in Firefox).

3. Locate the Editable IFrame

The TinyMCE editor uses an <iframe>. In the DevTools pane, locate a line like this:

<iframe class="tox-edit-area__iframe" ...></iframe>

Click it. You should now see the <iframe>'s document content.

4. Edit the Inner HTML

Inside that iframe, locate:

<html>
  <head>...</head>
  <body id="tinymce" class="mce-content-body">
    ...
  </body>
</html>

Right-click on the <body id="tinymce"> element → Edit as HTML.

5. Inject Your HTML Content

Paste your HTML directly inside the body, e.g.:

<h2>♞ Welcome to My Post ♞</h2>
<p>This is <strong>custom formatted</strong> text with a 
<a href="https://www.chess.com">link</a>.</p>
<img src="https://www.chess.com/bundles/web/images/offline-play/standardboard.47872846.png" width="300">

6. Click Somewhere in the Editor

After pasting, click somewhere inside the visual editor to trigger TinyMCE to recognize the change.

7. Submit Your Comment

Click “Post Comment” as usual.

⚠️ Warnings & Tips

• Do not insert <script> or unsupported tags — they will be stripped or blocked.
• This method bypasses the WYSIWYG view, so preview carefully.
• This can break your layout if HTML is malformed — test on a throwaway post first.

🧪 Example Use Case

Want to post a clean-looking code block? Inject this:

<pre>
def greet(name):
    print(f"Hello, {name}!")
</pre>

Or embed a Chess.com game:

<iframe src="https://www.chess.com/emboard?id=12345678" 
    width="400" 
    height="350" 
    frameborder="0">
</iframe>

Let me know if you want a ready-to-paste snippet for a specific post (like a GT promo or dev announcement)!