---json
{
    "page_id": "wtzzzxv9l0cj43vpg9lsy"
}
---

====== ComboStrap UI - File ======


===== About =====
The ''file'' component is a component that represents the content of a file.

It's a [[docs:utility:prism|prism]] component that add:
      * syntax highlighting
      * and clipboard copy



===== Example =====

You can create block of code like this one:

<file md line-numbers>
# 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
</file>


===== Syntax =====
This is a [[docs:utility:prism|Prism component]] and follows the [[docs:utility:prism#syntax|prism syntax]]. You should then check the [[docs:utility:prism#syntax|prism syntax documentation]] for all details.







===== Configuration =====

==== Enable / Disable ====
The ''file_enable'' [[docs:app:configuration|configuration]] permits to enable / disable this component.

If the component is disable, the [[doku>wiki:syntax#code_blocks|dokuwiki file block]] is applied.
==== Theme ====

This component gets the [[docs:utility:prism|theme]]  chosen

For [[release:deprecated:userstyle#class|custom css style]], there is also an extra [[release:deprecated:userstyle#class|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.
<code css conf/userstyle.css>
.file-combo-pre{
    background-color: #e9ecef !important;
}
</code>