Syntax

Base Foundry stack

Add styled code snippets to your pages. Allows you to share code with others, create tutorials, provide examples and much more.

  • Opt to display line numbers
  • Add alternating colored backgrounds to code
  • Include drop shadow on code snippet
  • Collapse code in Edit Mode
  • Choose which line number code snippet should start on
  • Choose from 4 different preset color palettes
  • Set custom rounded corners

Example

CSS Example 
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
Javascript Example 
  var Button = function (element, options) {
    this.$element  = $(element)
    this.options   = $.extend({}, Button.DEFAULTS, options)
    this.isLoading = false
  }

 function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.button')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.button', (data = new Button(this, options)))

      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }
HTML Example 
<ul>
	<li>This is the default HTML.</li>
	<li>You can replace it with your own.</li>
	<li>Include your own code without the HTML, Head, or Body tags.</li>
</ul>

Using Syntax

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Syntax stack.

Lines

Line Numbers
Include line numbers for your code snippets. Allows for easier legibility to code snippets.

First Line Number
If you’re using line numbers for your code snippet you can choose which line you wish for the snippet to start on.

Stripe Code
Add a colored background to every other line of code. Another tool for increasing the legibility of your code snippets.

Stripe Color
Use a color picker, which includes an opacity slider as well, to adjust the color of your background striping if enabled.

Styling

Color Palette
Choose from one of four different overall color palettes for your code snippets. Select one that fits in with your site style.

Drop Shadow
Add a subtle drop shadow to the outside of your code snippet.

Override Rounded Corners
By default Syntax uses Foundry’s built-in corner rounding, which is found in the Control Center stack. You can override those settings here using custom corner rounding.

Advanced

Collapse Code in Edit Mode
Enable to collapse the code snippet in Edit Mode to same space when you’re not currently editing your code snippet.