ComboStrap UI - File

Undraw My Documents

About

The file component is a component that represents the content of a file.

It's a prism component that add:

  • syntax highlighting
  • and clipboard copy

Example

You can create block of code like this one:

# Markdown header

The `file` component:

  * takes over the manipulation of the default [dokuwiki file block](http://www.dokuwiki.org/wiki%3Asyntax#code_blocks)
  * is a wrapper around the [Prism component](/prism) to add:
      * syntax highlighting
      * clipboard copy

Syntax

This is a Prism component and follows the prism syntax. You should then check the prism syntax documentation for all details.

Configuration

Enable / Disable

The file_enable configuration permits to enable / disable this component.

If the component is disable, the dokuwiki file block is applied.

Theme

This component gets the theme chosen

For custom css style, there is also an extra userstyle class created on the pre element with the pref suffix. This element contains the code and the button.

Example:

  • Change the background color of file.
.file-combo-pre{
    background-color: #e9ecef !important;
}




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap - Prism

Prism components permits to add raw external content in the web page with extra's such as line number, copy to clipboard and eventually code highlighting The following component are prism component:...
Undraw My Documents
ComboStrap UI - Block

A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can...
Default Component Stylesheet File Explorer
Component Stylesheet

This functionality gives the possibility for Web Designers to customize the style of Combostrap components. If a stylesheet with the name of a component is found in the components/css directory of a...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner