.. include:: /Includes.rst.txt

Usage
=====

Create New Content
------------------

.. figure:: ../Screenshots/CreateNewContentWizard.png
   :alt: Create New Content Wizard
   :class: with-shadow
   :width: 600px

   *Create New Content*

To use the extension, insert the plugin via the content element wizard.  
Using a headline or any other field is optional.

.. figure:: ../Screenshots/CreateNewContentGeneral.png
   :alt: Create New Content General
   :class: with-shadow
   :width: 600px

   *Create New Content – General*

Programming languages and themes
--------------------------------

.. figure:: ../Screenshots/CreateNewContentLanguage.png
   :alt: Create New Content Language
   :class: with-shadow
   :width: 600px

   *Create New Content – Configuration → Languages*

Phiki Configuration
===================

The Phiki extension supports both **local** and **global** configuration options.

Local Settings
--------------
Local settings can be defined per *content element*.  
This allows you to fine‑tune the behavior of individual elements based on their specific purpose or content.

.. figure:: ../Screenshots/CreateNewContentSettings.png
   :alt: Create New Content Settings
   :class: with-shadow
   :width: 600px

   *Create New Content – Configuration → Settings*

* **Language:**  
  Select the programming language to be highlighted

* **Phiki Theme:**  
  Select the desired theme.

* **Linenumbers:**  
  Adds a linenumber in front of eache line of code.

* **Show language label:**
  Shows the selected language in the header of the content element.

* **Copy button:**
  Shows a copy button in the header of the content element.


Global Settings
---------------

Global settings are managed centrally via:

``System -> Settings -> Extension Configuration -> Phiki``

These settings control the overall behavior of the Phiki extension across the entire system.

.. figure:: ../Screenshots/ExtensionConfiguration.png
   :alt: ExtensionConfiguration
   :class: with-shadow
   :width: 100%

   *Extension Configuration*

Frontend
--------

.. figure:: ../Screenshots/Frontend.png
   :alt: Frontend
   :class: with-shadow
   :width: 100%

Backend
-------

.. figure:: ../Screenshots/Backend.png
   :alt: Frontend
   :class: with-shadow
   :width: 100%

   *Backend view*

----

.. raw:: html

   <div style="height: 1em;"></div>