๐ช ๐ฐ๐พ๐ฒ๐ญ๐ฎ ๐ฝ๐ธ ๐ผ๐น๐บ๐ป๐๐ณ๐ฌ ๐ฌ๐ธ๐ญ๐ฒ๐ท๐ฐ
-
INTRODUCTION
Hihihi friends! I've created this coding guide because I'm super disorganized and figured that I'd keep this as the "master list" guide. I'm still not sure if I'm going to delete the other blogs I have or not, but from now on this one will be the most up-to-date one...provided that my inability to Keep My Shit Together (TM) doesn't somehow throw a wrench into that plan.
This first part is mostly a technical explanation that is 100% unnecessary. It's like the first 90% of those stupid recipe blogs that are completely unneeded for the actual recipe. Whoops. Put it in a spoiler to spare you all hahaha
Anyway, I just wanted to start this thing out by including a disclaimer that I am by no means calling myself an Expert Programmer TM. The only """""""credentials""""""", if we want to go there, that I have to be making these kind of posts are a single CS class I took almost two years ago, where I forgot everything except maybe a few things about HTML which I picked up only because I'd been using BBC on a different site for years. I think I only retained enough from that class to understand enough programming jargon that I can make sense out of help forums and easy guide websites regarding HTML (for modifying pre-existing Tumblr themes) and now, Markdown, AKA what URSTYLE uses. And I only started looking into Markdown because I need it to do this online ePortfolio thing for a Spanish translation class I'm in this semester. It be like that sometimes.ANYWAY. Point being, I'm certainly no computer expert, and I will 100% miss something or make mistakes. So if you guys see something that is just wack, feel free to (politely) drop a comment or send me a message!
Now, to get a little bit into the logistics of this post - I've divided it up into various sections to explain some of the features that we are able to do on URSTYLE. I'm skimming over the built-in features (AKA the features that you can access by clicking something on the top bar of the editor) a bit, though if you need help or clarification with any of those you can of course ask me!!! I would be more than happy to help
If you've read up until here and are already like, come on Alicia just get to the damn coding stuff already jeez you're so annoying, feel free to skip the rest of this intro bit and scroll down to the first section lol. But for those of you who want to know more about how this stuff works on a technical level, Imma hit you up with what I've managed to figure out.
So, to start, HTML (Hypertext Markup Language) is the standard markup language for documents designed to be displayed in a web browser. HTML is the language that our computers read, which is then converted to the formatting that we seen on our screens through some Fancy Technical Process that I don't know anything about. Markdown, on the other hand, is similar to HTML in that it's a markup language, but it was designed specifically to be readable or "plain text formatting syntax". In the places where Markdown is used, such as in URSTYLE posts, Fancy Technology converts the Markdown syntax into HTML, which is then read by the computer and displayed properly on our webpages.
So, this means that, if we want italicized text on URSTYLE, typing
*text*is converted to<i>text</i>, and then it's displayed. Keep in mind that Markdown's purpose is to be readable. Even if the HTML <i> </i> tags are pretty much just as readable as the Markdown astericks, HTML has some wack shit that happens if you do more complex things. Plus the excess of { } and : and ; and < > and / gets super jumbled and super confusing real fast, especially if you're a 0 IQ dumbass like me who can't even remember what she ate for breakfast.Of course, the fact that Markdown uses plain text symbols like pipe characters (|), brackets, astericks (*), backticks (`), etc means that sometimes things that we don't want to be interpreted as code gets mixed in. There's a way around this, called a "backslash escape", which I'll get to a little further down in the post. And there are a few things that, as far as I know, you can't do in pure Markdown syntax - indenting entire blocks of text outside of a block quote, for example, or having multiple line breaks. To do some of those things, most of what I've found talks about writing it in HTML or linking CSS (which, btw, we can't do with URSTYLE posts). Some of these things I have potential solutions for. Some of them I do not. But if anyone finds a solution to something I don't have a solution for, 100% hit me up and I'll add it here and give you a shout-out!!!
Also, a forewarning - not every Markdown syntax is supported by every website that uses Markdown. Plus, different sites can have different syntax for different things. For example, a spoiler in URSTYLE uses
|| text ||, while a spoiler on Reddit uses-> text <-, and Slack can't even process spoilers. Reddit allows you to create footnotes. Discord and URSTYLE, on the other hand, do not. You get the idea. For our purposes, I'm going to call the specific syntax of Markdown that works on this site URSTYLE-Flavored Markdown.That's all for now
As always, please let me know if anything's confusing or if I messed something up, or if you have any other questions (which I will try my very best to answer)!
TABLE OF CONTENTS
THE BASICS
TABLES
LISTS & SUBLISTS
RESIZING TEXT
HTML CHARACTER CODES
CODE BLOCKS
DIRECTLY EMBEDDING SETS
ESCAPING MARKDOWN SYNTAX
SOURCES
I've compiled a list of links that I used while looking stuff up below, just in case others find it useful!
https://www.rapidtables.com/web/html/html-codes.html
https://www.markdownguide.org/cheat-sheet/
https://www.markdownguide.org/basic-syntax
https://www.markdownguide.org/extended-syntax
https://www.reddit.com/wiki/markdown
https://daringfireball.net/projects/markdown/basics
https://daringfireball.net/projects/markdown/syntax
https://www.markdownguide.org/getting-started
https://dillinger.io/Comments (9) -
THE BASICS
I won't spend too much time talking about the basic stuff (AKA what can be accessed through the top bar of the post editor), but I'll just drop this table here for quick reference! And if you need help with something related to these things, you are still of course more than welcome to ask!!!
Function Code Renders As Italicize text *text*or_text_text Bold text **text**or__text__text Bold + italicized text ***text***or___text___text Colored text %(color name or #color hex code. for this example, I used red)[text]text Code 
textInline links [Google](www.google.com)Google Inline links w/ title [Google](www.google.com "Title/text here")Google Inline links w/ color [%(red)[Google]](www.google.com)Google Strikethrough text ~~text~~textInfo bubble ยฐfa-infoยฐ(information text)Text w/ info pop-up ยฐtextยฐ(information text)text Image 
Image w/ link [](link URL)click example image to testBackslash escape (more on this down below) \*this text is not italic**this text is not italic*
Headers:
#anchor(text)text
Horizontal rule:
***or---. Creates a semi-transparent pale gray line across the entire page.
Block quotes:
use a
>sign at the start of every paragraph. These can be nested!Hi friends
It's a blockquoteAnd now
it's a nested block quote!
> Hi friends
> It's a blockquote> And now
>> it's a nested block quote!
Spoilers:
|| text || -
TABLES
URSTYLE-flavored Markdown lets us create tables! Yay!
Header 1 Header 2 Text Text Text Text Here's the code:
| Header 1 | Header 2 |
| --- | --- |
| Text | Text |
| Text | Text |
Aligning Tables:
You can choose how to align the text/pics in each cell, as well, by adding a colon (:) to the left, right, or on both side of the hyphens within the header row.
Syntax Description Test Text Header Title Here's this Paragraph Text And more | Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |Here's a handy lil ๐๐ช๐ป๐ด๐ญ๐ธ๐๐ท ๐ฃ๐ช๐ซ๐ต๐ฎ ๐๐ฎ๐ท๐ฎ๐ป๐ช๐ฝ๐ธ๐ป, so that we're not sitting here typing dashes and pipe characters until the end of time.
Misc Functions:
You can also just type the headers for tables to make rad little boxes, as such:
|rad box
-rad box Different alignments:
|rad box center align
:-:rad box center align |rad box right align
-:rad box right align And all table cells don't necessarily need to have text in them.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Text in Tables:
We're able to italicize, bold, strikethrough, and add color to text within tables. We cannot re-size text, add headers, or put spoilers within tables. Tables will automatically adjust the cell height/width based on what you input in each cell.
Note that we also do not have the ability to use a 'return'/'enter key' function within a table. The work-around I've been using mostly involves just spamming nonsense (either random gibberish & coloring it white so it's invisible or
for a non-breaking space) until the text is forced to the next line. Very 0 IQ but I've no other ideas atm & people online don't seem to have a solution either
Images in Tables:
We can also insert images, into tables, which could be useful for creating inline images (which, as far as I know, is not possible in any Markdown implementation to date. Most of the help forums talk about using HTML or CSS to achieve inline images).
| |  |  |
|:-:|:-:| :-:|
Tables in Spoilers:
Tables in spoilers can do everything a table outside of a spoiler can: have directly embedded sets, colored/stylized text, different alignments, pics, etc
this is center aligned wooo bold text tables yay more text -
LISTS & SUBLISTS
There are two types of lists that you can have with Markdown: ordered and unordered. Unordered lists are just the ones with bulletpoints; ordered are the ones with numbers.
Unordered Lists:
There are 3 symbols that get you an unordered list: *, +, - . You must include a space in between the symbol and the first letter of the list item in order for it to work.
- hi
+ unordered list
* woohoo- hi
- unordered list
- woohoo
Ordered Lists:
1. ordered list
2) yay- ordered list
- yay
Sublists:
- Abacus
- absolute
- Bananas
- bitter
- bupkis
- burper
- Cunning
In order to get an unordered sublist, you press space 2 times before you type the symbol. In order to get an ordered sublist, you need to press space 3 times.
A note:
A note about using a, b, c, etc as your values for an ordered list-
a. hi
b. this doesn't work
c. wackBut a/b/c/etc works for sublists? You just have to press space twice, before the letter
- But
a. I think this does
b. I'm not sure why
- yikes?
a. I don't knowwww
Checklists:
[ ] Checklist 1 [ ] Checklist 2 [x] Checklist 3 -
COLORED/RESIZED TEXT & EVERYTHING HTML
There are several ways to create different text sizes.
Of course, there's:
text
=text
-But thanks to Markdown syntax, we can get sizes that are more specific than just the two biggest text sizes up there.
Note: For some reason, the 3 # setting and the 5 # setting always convert the text to uppercase and bold. I am not entirely sure why. Also, the # sign must be the first thing on the line for this to work, so text alignment and putting this syntax into tables doesn't seem to work.
Hola
-
HTML CHARACTER CODES
Long story short: HTML recognizes each character as a unique code. We can take advantage of that to do two things: center large text, and create line breaks/indentations.
The biggest problem with trying to use centered big text, like
|- %(pink)[big text plz] -|
-
is the fact that Markdown confuses that specific combination of pipe characters (|) and dashes (-), since
|woooooooo
-
createswooooooooo Like we discussed earlier.
So. Basically, we need to try to avoid this confusion. The workaround: using the HTML character code for the pipe character,
|.Testing it out:
|- %(pink)[centered paragraph] -|
-
(where the |- has been replaced with|-), we get:centered paragraph
Unfortunately, we still can't get the biggest heading text (with the = instead of the - on the following line) to be big and colored. I think that's an URSTYLE thing, not a Markdown thing.
As for indentations and extra line breaks, one popular workaround I've seen people ~on the web~ talking about is using the HTML character code for a non-breaking space,
.To demonstrate:
Wowieeee I love indented textย ย ย ย ย ย Wowieeee I love indented text
Or, if we want line breaks:
Paragraph 1 Paragraph 2Paragraph 1
ย
Paragraph 2
You can look up some more of these HTML character codes ๐ฑ๐ฎ๐ป๐ฎ.
-
CODE BLOCKS
If you want to create multiple lines of code, and don't feel like putting backticks around every damn line you have, you can take advantage of the code blocks. To get one to show up, you can press space 4 times, or put three backticks (```) above and below the text that you want to show up in the code block.
we got some code y'all you have to press space four times each time you want to start a new line or you could just wrap your code in backticks (```) and not have to deal with that, lmfao. There's a little symbol like </> 5th from the left at the top of the editor. You can click that and replace "code_text" with your actual code.There's also the grouped code function, 5th from the right at the top of the composer.
looks like thisyo yo yoPut some code in here |- center paragraph -| **bold text** et cetera<ย
ย
-
DIRECTLY EMBEDDING SETS
You can directly embed sets into your posts now, using the UR icon at the top of your composer. You'll have to choose if you want the embedded set to be big or small, and if you want to embed items, they'll automatically be small.
Set card (big)option provides us with:[bigSet]Link URL[/bigSet]Set card (small)option:
[set]Link URL[/set]Which can then be grouped inline, using
You get 3 small set cards/item cards per line. Both big and small set cards can be aligned differently, placed in spoilers, and placed in tables. Big set cards cannot be grouped inline.
ย
some set cards it's lit -
ESCAPING MARKDOWN SYNTAX
Last section, yay! So what "escaping Markdown syntax" means is that we're telling our Fancy Technology not to interpret special characters (such as *, |, _, =, etc) as Markdown syntax but without making it look like
code, by preceding them with a backslash\*this is not italicized*
\*this is not italicized*For things with multiple special characters (i.e. bolding text, bold + italicizing text, etc), you need to put a backslash in between each character that precedes the text.
__this is not bolded__
***this is not bold + italicized***\_\_this is not bolded__
\*\*\*this is not bold + italicized***Markdown provides backslash escapes for the following characters:
\ backslash
*asterisk
_ underscore
{} curly braces
[] square brackets
() parentheses
#hash mark
+plus sign
-minus sign (hyphen)
. dot
! exclamation mark -
reserved just in case
feel free to comment anywhere below this post!
