SCodeExampleComponent

Platform  

html

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

• Can display out of the bos codes like bash, shell, css, js, php and html

• Possibility to add some languages through the property languages

• Full support for sugar theming system for easy integration

  Import

  Install

  Interface

1. active

   String

   Specify which "tab" is active in case of multiple languages examples

2. toolbar

   ["copy"]

   • copy

   Array<String>

   Specify what you want in the toolbar. Currently available item is "copy"

3. toolbarPosition

   nav

   • content
   • nav

   String

   Specify the toolbar position. Can be "content" or "nav"

4. languages

   {}

   Object

   Specify some languages that you want to support. Must be "[key]: language" object syntax. See highlight.js doc for supported languages

5. items

   []

   Object[]

   Specify the items to put in your code example

6. lines

   15

   Number

   Specify how many lines to display at max

7. moreLabel

   Show more

   String

   Specify the "show more" button label

8. lessLabel

   Show less

   String

   Specigy the "show less" button label

9. moreAction

   toggle

   • toggle

   String

   Specify the action to execute when click on the "more" button. Currently available action is "toggle"

10. more

    false

    Boolean

    Specify if you want to expand the more feature at start or not

11. scrollOnMore

    true

    Boolean

    Specify if you want to scroll to the code when clicking on the "show more/less" button

12. scrollToSettings

    {}

    Object

    Specify some scrollTo settings

  Related resource(s)