Working with Markup Languages in VB Studio

A new markdown parser/renderer greatly improves the viewing and editing experience with markup in VB Studio. Previously, the renderer used in VB Studio wasn't in line with markdown specifications that other sites, such as GitHub, support. With this release, the server generates a JSON model from markup and then the client side processes it, rendering the HTML in the VB Studio user interface. This results in a significant improvement in markdown rendering that is similar to and consistent with what other open-source software companies support. These changes impact the SCM, Wiki, Announcement, MR, and Environment Detail pages.

Here are some notable changes in VB Studio that you may notice as you work with markdown:

• The Table of Contents is always available on wiki pages (and in the Git page's File view). When the icon is clicked, the contents are displayed. No special coding was necessary for this.

  
  
  Description of the illustration renderer-improvements-toc.png
  

• An Edit button was added to the SCM README.md page to facilitate quick direct edits.

  
  
  Description of the illustration renderer-improvements-readme-edit-button.png
  

• After making an edit, you can go to the Preview tab to look at it. Your edit is displayed immediately. You don't have to scroll down through the page you were editing to find your change. In the Preview tab, it should auto scroll to the line or section being edited.
• The header bar is sticky, so when you go from the Edit tab to the Preview tab to look at your changes, the header bar stays at the top of the page as well.

  
  
  Description of the illustration renderer-improvements-sticky-header.png
  

• Headers have link accessors, which are shown when you hover over the header.

  
  
  Description of the illustration renderer-improvements-link-accessor-hover.png
  

  When you click the header, the browser page's URL is updated. You can copy the URL and embed it in your pages, to provide a direct link to the header.

  
  
  Description of the illustration renderer-improvements-link-accessor-click.png
  

• Code in markup is shown with syntax coloring when the code language is specified in code blocks.

  
  
  Description of the illustration renderer-improvements-code-colors.png
  

  For example, for this Java code:

  ```java
  public class Main {
    public static void main(String[] args) {
      if (20 > 18) {
        System.out.println("20 is greater than 18"); // obviously
      }
    }
  }
  ```

  The Java syntax highlighting in Confluence markup would be:

  {code:language=java}
  public class Main {
    public static void main(String[] args) {
      if (20 > 18) {
        System.out.println("20 is greater than 18"); // obviously
      }
    }
  }
  {code}

  In Textile markup it would be:

  bc[java].
  public class Main {
    public static void main(String[] args) {
      if (20 > 18) {
        System.out.println("20 is greater than 18"); // obviously
      }
    }
  }

• Empty lists in markdown are shown as empty lists.
• Line breaks for Markdown have been standardized. The backslash (\) at the end of a line forces a line break. To create a paragraph, you no longer have to enter the entire paragraph on one long line. You can enter it using many lines and then just toggle line wrap on or off.

  Line breaks in existing text blocks may not be displayed properly. This is a known issue.

• The use of images in Wiki comments is supported.