00:00
00:00
Gimmick
Thanks for dropping by!
NOTE: My outbox is full, so I may not be able to reply to PMs directly - might PM a reply via my alt or through comments.

Student

Somewhere

Joined on 8/20/08

Level:
28
Exp Points:
8,430 / 8,700
Exp Rank:
4,407
Vote Power:
6.96 votes
Rank:
General
Global Rank:
388
Blams:
1,969
Saves:
23,283
B/P Bonus:
48%
Whistle:
Silver
Medals:
2,487

Writing news posts with AsciiDoc and VS Code

Posted by Gimmick - March 19th, 2022


What is this?

I had a discussion with @The-Great-One a while ago on how to make editing the Newgrounds Tank Tribune easier. In my experience, VS Code is a very good text editor with a load of features designed not only for editing code - despite the misleading name - but also for more general-purpose text editing like Notepad++ and others.


That being said, this CAN be used for making newgrounds News and Forum posts! I’ll show the process below. In my initial comment I had suggested using Pandoc, but turns out it wasn’t needed either because of a set of fortuitous circumstances!


Fortunate circumstances

That is, I had assumed that ‘RTF’ was the only format that Newgrounds supported. Turns out it also supports HTML; this is great because it vastly simplifies our workflow - the default Preview in VS Code for “AsciiDoc” can be used - so you can copy the generated preview and paste it directly into the newspost box!


Here’s the process for creating a News post using just VS Code and AsciiDoc:

  1. Install VS Code, and install the AsciiDoc extension.
  • Press Ctrl+Shift+X to open the Extensions panel, and search for AsciiDoc (install the one by asciidoctor)
  1. Create a blank file and type up the content using asciidoc. This is fairly straightforward if you have a decent grasp of asciidoc already, but given that it’s not as common as markdown there’s going to be a short learning curve attached.
  • If you need syntax highlighting to make it easier - see the option in the status bar at the bottom right corner that says Plain Text? Click on it, and type AsciiDoc. It’ll then highlight valid asciidoc syntax where it can.
  • Here’s a quick reference for AsciiDoc.
  1. Press Ctrl+Shift+V to open up the preview.
  • Alternatively, press Ctrl+Shift+P to open up the Command Palette, and type asciidoc open preview or similar.
  1. Select all the text and copy it: Ctrl+A, Ctrl+C
  2. Open up the newgrounds news post page and paste the contents in the text box.
  3. Voila, you’ve converted asciidoc to a newgrounds post!


Press Ctrl+Space to open up a list of the frequently used words using IntelliSense. This will open up a list of frequently used words, which is especially useful if you’re repeating them, e.g. in the case of usernames.


Including images works! Unlike markdown, asciidoc has the option :data_uri: directive which means that all images will be embedded using data URIs, so you can copy those directly into the newspost. Just remember to include it in the top of every doc, just below the main header, and you’re good to go. The only downside is that large images can make the preview take a while to generate, because it’s effectively converting it to text. Still, that’s a small price to pay for the convenience!


Caveats

Unfortunately, IntelliSense/Ctrl+Space does not seem to work well with usernames with hyphens in them, and it doesn’t recognize the @ as belonging to a username mention, as it only seems to look for whole words in a programming context (i.e. variable name rules - words_separated_by_underscores are treated as one, but words-separated-by-hyphens are not; @ is not considered a standard part of a variable, so it doesn’t show words that begin with an @ like @Gimmick or @The-Great-One on Ctrl+Space)


Videos aren’t supported, period - those will have to be embedded manually. Even though AsciiDoc supports embedding videos, it won’t be ported to the newspost because the embed metadata is stripped when copying the text from the preview. Unless Newgrounds supports uploading AsciiDoc files for posts, it’s not likely that you’ll have newsposts achieve 100% asciidoc → news post feature parity (although 90% isn’t bad).


Also, paragraph info is stripped out when you copy from the preview to the post. That is, empty lines are stripped from the clipboard when pasting into the file. As a workaround, you can have empty lines by pasting {sp} + into a new line between each paragraph. Perhaps this will be less inconvenient in the future if blank lines are included between paragraphs when copying HTML into the newspost box.


Finally, the preview includes a "Last Created at <date>" footer which is also selected when you select all text. You’ll need to remove that manually.


Closing thoughts

This section is primarily addressed to @The-Great-One, as it concerns the Tank Tribune.


Hopefully this speeds up your workflow a lot, especially if you make an asciidoc template. And what better way to prove it’s possible than by dogfooding? Yes, you read that right - this entire post (title notwithstanding as that’s a separate text field) has been written using the above steps.


And to help you get started, I’ve included a template of last week’s Tank Tribune so that you can get an idea of how it works! Alternatively, just replace the text in the paragraphs with content for the upcoming weeks.


There’s obviously far better templates that could be made but this is a starting point. (Someone experienced with AsciiDoctor could probably make a far better one, and would probably also be appalled with the one I threw together.) Download the repo as a zip, extract the files to a folder and open the .adoc file in VS Code and you can get started editing right away.


DOWNLOAD TEMPLATE


Tags:

3

Comments

There's some glaring bugs when it comes to things like sections converted from the HTML output to the newspost input. For example, if you have a <h4> (or whatever it is that "==== text" is converted to) then when you paste it in the newspost box, you won't be able to add/remove underlines, or make it bold. Funnily enough, the italicizing works.

But apart from that, it works smoothly for the most part.