Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

In this Discussion

How to format text and code on the new forum

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:

I love this book

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

«1

Comments

  • edited October 2013

    This is a test for ruby syntax

    def setup
      size 100, 100
    end
    

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

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

  • edited October 2013

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

  • 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…

  • @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.

  • 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.

  • edited February 2017
    test
    
  • edited October 2013

    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...

  • 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

  • Yes i'm aware of this, thanks!

  • 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.

  • edited October 2013

    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! (*)

    • 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

  • edited October 2013

    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

  • 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

  • thanks !!

  • edited February 2017

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

    Please do! :o3

  • " Plain URLs will be rendered as links also.

    Alt text 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 ?

  • edited October 2013

    Nevermind

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

    codeBlock(**noBold**){}
    
  • @_vk no, i'm afraid not.

  • @Stanlepunk image upload is enabled!

    Screen Shot 2013-10-20 at 1.46.41 PM

  • 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!

  • Putting it on the list ...

  • Reload and try now ...

  • That was fast! Many thanks.

  • Hehe .. my pleasure.

  • edited October 2013

    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.

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

  • #include 
    
    int main(void)
    {
      printf("Hello World\n");
      return 0;
    }
    
  • @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.

  • include

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

  • @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

  • 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.

  • @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.

  • `#include

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

    include

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

  • include

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

  • 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.

  • edited October 2013

    @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 ...

  • 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_vk
    edited October 2013

    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: this is how the above has been done

  • edited October 2013
    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.
    
  • Hello @fjen,

    is it intended that emoticons are parsed in the sourcecode?

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

    .

  • edited June 2014

    -

  • edited August 2014

    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();
    }
    
  • edited April 2015

    Testing:

    void setup() {
      println("Hello, world!");
    }
    
  • edited May 2015
    var aTest = ""; function noop () {};
  • math =
      root:   Math.sqrt
      square: square
      cube:   (x) -> x * square x
    
  •   if(xPos==152){
       Score++ ;
      } 
    
Sign In or Register to comment.