How to format text and code on the new forum

fjen

The new forum uses markdown syntax to allow you to format your text and code.

I am summarising some simple markdown syntax here, the link above has additional syntax and more detail.

Simple text formatting

**bold** will make your text bold

*italic* will make your text be in italic

[my link](http://yourdomain/my-link.html) will generate an exciting link

Plain URLs will be rendered as links also.

![Alt text](http://yourdomain/image.png) will turn into an image:

Note that there are two image related buttons in the "button bar": the first one is to insert markdown for an image that you host (have an URL for), the second blueish one is for uploading an image plus generating markdown for it.

Code formatting

Multi line code

Any text that has minimum either 1 tab or 4 spaces to the left will be automatically rendered as code using a Processing syntax highlighter. The button bar above the text areas have a code button labeled "C" that will indent a text selection with 4 spaces.

void setup () {
    size( 200, 200, JAVA );
}

// the draw
void draw () {
    background( 0 );
}

Do not use <code> or backticks ` for longer or multiline code snippets.

Other languages can be highlighted using the <pre lang="javascript">tag with a language. Here are some common examples:

<pre lang="c">...your code here...</pre> for Arduino

<pre lang="cpp">...your code here...</pre> for OpenFrameworks

<pre lang="java">...your code here...</pre> for Java

<pre lang="javascript">...your code here...</pre> for JavaScript

Inline code fragments

Using backticks `render as code` you can render inline fragments as code, note that these are not syntax highlighted: this is code. Please do not use backticks for longer or multiline codes as it becomes unreadable.

If you select just a piece of text with no line breaks in it and click the "C" button in the button bar you will get the text wrapped in backticks.

Referencing others

You can reference other users by adding a @ sign with their name after it: @fjen

monkstone

This is a test for ruby syntax

def setup
  size 100, 100
end

Complains of no brush for ruby, doesn't look too bad.

fjen

@monkstone ... does not complain for me, did you fix it?

monkstone

@fjen No, I guess it "learned" after first used?

tim_pulver

Is there a reference of working markdown codes online? Here is Daring Fireball’s Markdown syntax reference. Just wondering which codes work here besides the ones you mentioned…

fjen

@tim_pulver Vanilla uses an implementation based on these specs from Daring Fireball. I assume anything mentioned there does work here but have not tested.

shiffman

Hi I'm just testing a post to make sure I get how the forum works!

void setup() {
   println("Hello");
}

And now for some inline code.

fjen

test

PhiLho

Since this is a sandbox...

Let's experiment with Java generics, these angle brackets are troublesome for this forum...

No formatting (bad, no line break; lot of people use this, alas):

List list = new ArrayList(); Map<String, PImage> images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

With code formatting (with backticks)(something to avoid beyond one line):

List<String> list = new ArrayList<String>(); Map<String, PImage> images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

With <code> formatting (same remark):

List list = new ArrayList(); Map<String, PImage> images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

With <pre> formatting:

List list = new ArrayList();
Map images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

Idem, using &lt; to escape the < braket:

List<String> list = new ArrayList<String>();
Map<String, PImage> images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

Idem, adding a space after the bracket to escape it (ugly!):

List< String> list = new ArrayList< String>();
Map< String, PImage> images = new HashMap< >(); // Java 7 syntax, not for Processing yet!

Idem, adding a zero-width space after the bracket (hard to do!):

List<​String> list = new ArrayList<​String>();
Map<​String, PImage> images = new HashMap<​>(); // Java 7 syntax, not for Processing yet!

With one tab indentation:

List<String> list = new ArrayList<String>();
Map<String, PImage> images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

With four spaces indentation:

List<String> list = new ArrayList<String>();
Map<String, PImage> images = new HashMap<>(); // Java 7 syntax, not for Processing yet!

The last two solutions works better, but are limited to Processing formatting (no HTML code!) and it is not the easiest to use in the textarea.

The backticks and indentation solutions are Markdown notations, it correctly handles the code; but we want the syntax highlighting solution, which is lost there...

gyula

Two identical pieces of code indented with the code button labeled "C" above the text area.

First without a blank line above the code:

text //my code void setup() { println("my code"); } text

And now with a blank line above the code:

text

//my code
 void setup() {
    println("my code");
 }

text

fjen

Yes i'm aware of this, thanks!

PhiLho

Markdown wants blanks lines to delimit blocks, like lists or code. That's part of the "language".

One annoying thing, though, is that is collapses separate lines (with EOL chars) into one. This can be useful in a primitive text editor, not in a Web textarea which automatically wrap text, so we don't do manual line breaks to keep in the editing window.

GoToLoop

from -> forum.processing.org/two/discussion/180/could-somebody-answer-my-questionthe-programming-problem-#Item_8

• Stroke button doesn't work.
• And there's no underline button. Which is more useful than stroke.
• Some color buttons.
• image hosting.
• And quotes button doesn't seem to make much difference from a normal text!

@fjen There is not underline or strike-through in markdown I'm afraid.

The later I dunno; but underline (not sure it's markdown; probably native HTML) I've been using it here successfully.
It's just that it's painful to always use < u> ... < /u> all the time! ~X( A button for that would be blissful! (*)

fjen

• strikethrough is not available in markdown. use <s>xxx</s> xxx
• underline button is not there, i can add one. use <u>xxx</u> xxx
• i think we opted against colors. use other formatting options, there should be enough
• image hosting: the plugin for that need work, will come at later
• quotes should work now ... see:

some quoted text here

Chrisir

can someone explain in simple terms how to mark code? the code above looks cool but we can't see how it is done

I tried

` and

<

pre lang="java"> without any success

fjen

Paste code into the textarea, select it and press the "C" button above. This will indent the code by 4 spaces which is what markdown needs to recognise it as such. ... ah and you need an empty line above

Chrisir

thanks !!

GoToLoop

underline button is not there, I can add one. Use xxx xxx

Please do! :o3

Stanlepunk

" Plain URLs will be rendered as links also.

will turn into an image: "

what the adress link I must use if I want add image from my computer and I don't have a domain ?

TfGuy44

Nevermind

_vk

Is it possible to make bold inside a code block? How?

codeBlock(**noBold**){}

fjen

@_vk no, i'm afraid not.

fjen

@Stanlepunk image upload is enabled!

PhiLho

Great! I suggest to add a tooltip to distinguish it from the other image icon.

Also a little request / suggestion: when I select a word and hit Ctrl+K, it adds spaces before the word (the selection). It would be more useful to insert backticks around it, no? If it doesn't take you too much time.

Many thanks for your improvements on this forum!

fjen

Putting it on the list ...

fjen

Reload and try now ...

PhiLho

That was fast! Many thanks.

fjen

Hehe .. my pleasure.

learner1

this code example,

another, 1 2 This example can not run as you imagine. mine os is xp, with ie8 or chrome. as if enter key is no action, either. and sometimes the thread was freezen until you refresh it. you said can not be used, but I use it once, it acted perfectly. C has no reaction, too.

learner1

syntaxhighlighter can't find brush for: processing. OR no brush for ruby

fjen

#include 

int main(void)
{
  printf("Hello World\n");
  return 0;
}

fjen

@learner the c language seems to work fine for me. I'm not too sure what you are trying to say with that other comment.

The syntax highlighter might have hickups if you use other languages than Processing but should be fine if you reload the discussion page.

learner1

include

int main(void) { printf("Hello World\n"); return 0; }

learner1

@fjen, look at above thread, I copy yur C code. as you see, no format ocurs and prompt pop up, syntaxhighlighter can't find brush for: processing

learner1

include int main(void) { printf("Hello World\n"); return 0; }

when I post my comment, your thread become like this style. and when I reload, it recovers again.

fjen

@learner1, please read the how-to above. It clearly states that you are supposed to indent your code for it to get highlighted. Please use the button labeled "C" to do so.

The other problem i just did describe above, yes it will complain about the missing brush, that is a bug and will need to get fixed. For now you can just reload and it will go away.

learner1

`#include

int main(void) { printf("Hello World\n"); return 0; } `

include

int main(void) { printf("Hello World\n"); return 0; }

learner1

include

int main(void) { printf("Hello World\n"); return 0; }

learner1

Hi, fjen, as you see above, it's no use for doing anything you metioned. I have neither conside "indent", nor highlight any element.

labled C do not reaction any more when click it. I try html, it seems can do well sometimes. it's rather trouble to put down so many codes.

forget it. I'll make do without this labels.

fjen

@learner1 no, it is working you are just doing it wrong. Paste code into the textbox, select it, click the "C" button and it will become indented. Then check the preview and your code will rendered as Processing code.

C code is not standard here so you need to use the <pre language="c"> wrapper there.

And another note: the # hash sign causes the formatting above in your tests as that is part of markdown formatting. This is all noted at the top of this discussion ...

learner1

it can not do. no matter how I try... I wonder why do you make things so complex? I give up.

int main(void) { printf("Hello World\n"); return 0; } `

include int main(void) { printf("Hello World\n"); return 0; }

_vk

It's simple, type anything with 4 spaces as a lead and an empty line before and after, you are done , look

int main(void) { printf("Hello World\n"); return 0; } 

    include int main(void) { printf("Hello World\n"); return 0; }

or as an inline (surrounded with backTicks ``) int main(void) { printf("Hello World\n"); return 0; } and include int main(void) { printf("Hello World\n"); return 0; }

the 'C' button is a helper tool to indent all selected lines 4 spaces.

this is how the above has been done:

learner1

int main(void) { printf("Hello World\n"); return 0; } 
include int main(void) { printf("Hello World\n"); return 0; }


thank you all. I give up. 'cause the C tool can do nothing. its no reaction when hit.

bckmnn

Hello @fjen,

is it intended that emoticons are parsed in the sourcecode?

void setup(){
  println("Oops :( that's not working");
}

2numerotwo2

.

2numerotwo2

-

makio135

Hello all

This is just a test

Trying this new markdown feature with inline code as well as classic code using ```:

void setup(){ println("Hello World!"); exit(); }

and using [c] button:

void setup(){
    println("Hello World!");
    exit();
}

orthoptera

Testing:

void setup() {
  println("Hello, world!");
}

fjen

var aTest = ""; function noop () {};

fjen

math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

glenmcmurchy

  if(xPos==152){
   Score++ ;
  }