### HTML Container Setup

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Set up the HTML container where the presentation will be rendered. An optional file upload input can be included for user file selection.

```html
<div id="presentation-container"></div>

<!-- Optional: file upload input -->
<input id="file-upload" type="file" />
```

--------------------------------

### CSS Line Styling Examples

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/rendering-shapes-content.md

Demonstrates CSS properties for styling shape borders and strokes, derived from PowerPoint line properties.

```css
border: 2px solid #FF0000;
border-style: dashed;
border-radius: 5px;
opacity: 0.8;
```

--------------------------------

### File Upload with Slide Mode

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

This example demonstrates how to use the plugin with a file upload input and enables presentation mode for slides. It configures navigation, auto-slide, looping, and transitions.

```javascript
// File upload with slide mode
$("#presentation-container").pptxToHtml({
  fileInputId: "pptx-upload",
  slideMode: true,
  slideModeConfig: {
    nav: true,
    autoSlide: 5, // Auto-advance every 5 seconds
    loop: true,
    transition: "fade",
    transitionTime: 0.8
  }
});
```

--------------------------------

### CSS Gradient Examples

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/rendering-shapes-content.md

Illustrates the CSS output for linear and radial gradients, extracted from PowerPoint gradient fills.

```css
background-image: linear-gradient(angle, color1 0%, color2 100%);
/* or */
background-image: radial-gradient(center, shape, color1 0%, color2 100%);
```

--------------------------------

### Example XML for App Version

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

This XML snippet shows the AppVersion element, which indicates the Office version. It's used for compatibility adjustments, with specific logic for versions 12 or less.

```xml
<AppVersion>16.0</AppVersion>  <!-- Office 2016, 15 = Office 2013, etc. -->
```

--------------------------------

### Example Execution Time Result Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

An example of a result object reporting the execution time in milliseconds for a process.

```javascript
// Execution time
{
  type: "ExecutionTime",
  data: 2345,  // milliseconds
  slide_num: -1
}
```

--------------------------------

### Example Progress Update Result Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

An example of a result object indicating the progress of a presentation processing task.

```javascript
// Progress update
{
  type: "progress-update",
  data: 50,  // percentage
  slide_num: 50
}
```

--------------------------------

### Example Relationship Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

An example of a relationship object, specifying an ID, type ('slideLayout'), and target path for a slide layout file.

```javascript
{
  id: "rId2",
  type: "slideLayout",
  target: "ppt/slideLayouts/slideLayout1.xml"
}
```

--------------------------------

### Example Global CSS Result Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

An example of a result object containing global CSS styles for the presentation.

```javascript
// CSS result
{
  type: "globalCSS",
  data: ".slide { width: 720px; } ...",
  slide_num: -1
}
```

--------------------------------

### Reveal.js Framework Integration

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Integrate the plugin with the Reveal.js framework for slide presentations. This example configures Reveal.js specific options like transition and slide numbers.

```javascript
// Reveal.js framework integration
$("#presentation-container").pptxToHtml({
  pptxFileUrl: "/presentations/talk.pptx",
  slideMode: true,
  slideType: "revealjs",
  revealjsConfig: {
    transition: 'zoom',
    slideNumber: true
  }
});
```

--------------------------------

### Example Slide Size Result Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

An example of a result object detailing the dimensions (width and height in pixels) of a slide.

```javascript
// Size result
{
  type: "slideSize",
  data: {
    width: 720,   // pixels
    height: 540   // pixels
  },
  slide_num: 0
}
```

--------------------------------

### Slide Layout Structure Example

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

This XML snippet illustrates the basic structure of a slide layout file, defining the background and placeholder shapes. It is used to provide default styling and positioning for shapes when they do not specify their own properties.

```xml
<p:sldLayout>
  <p:cSld>
    <p:bg><!-- Layout background --></p:bg>
    <p:spTree>
      <!-- Placeholder shapes -->
      <p:sp>
        <p:nvSpPr>
          <p:cNvPr type="ctrTitle"/>  <!-- Type indicates placeholder role -->
        </p:nvSpPr>
        <!-- Default shape properties for this placeholder -->
      </p:sp>
    </p:spTree>
  </p:cSld>
</p:sldLayout>
```

--------------------------------

### Example XML Structure for Content Types

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

This XML defines the mapping between file extensions and MIME types within a PPTX package. It is parsed by the getContentTypes() function.

```xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
  <Default Extension="xml" ContentType="application/xml"/>
  <Override PartName="/ppt/presentation.xml" 
            ContentType="application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml"/>
  <Override PartName="/ppt/slides/slide1.xml" 
            ContentType="application/vnd.openxmlformats-officedocument.presentationml.slide+xml"/>
  <Override PartName="/ppt/slideLayouts/slideLayout1.xml" 
            ContentType="application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml"/>
  <Override PartName="/ppt/slideMasters/slideMaster1.xml" 
            ContentType="application/vnd.openxmlformats-officedocument.presentationml.slideMaster+xml"/>
</Types>
```

--------------------------------

### Example Slide Result Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

An example of a result object representing a single slide, including its type, HTML data, slide number, and file name.

```javascript
// Slide result
{
  type: "slide",
  data: "<div class='slide'>...</div>",
  slide_num: 1,
  file_name: "slide1"
}
```

--------------------------------

### Initialize pptx.js with File Input Options

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/configuration.md

Configure how the pptx.js plugin loads PPTX files. Use `pptxFileUrl` for direct loading or `fileInputId` to link to an HTML file input element. Both can be used simultaneously.

```javascript
// Load from URL
$("#slides").pptxToHtml({
  pptxFileUrl: "/presentations/keynote.pptx"
});
```

```javascript
// From file upload
$("#slides").pptxToHtml({
  fileInputId: "file-upload-input"
});
```

```javascript
// Both
$("#slides").pptxToHtml({
  pptxFileUrl: "/default.pptx",
  fileInputId: "file-upload-input"
});
```

--------------------------------

### Initialize pptxjs with jQuery Plugin

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Use the pptxToHtml jQuery plugin to initialize pptxjs. Pass a configuration object with pptxFileUrl to load and convert the presentation.

```javascript
var $container = $("#slides");
$container.pptxToHtml({pptxFileUrl: "deck.pptx"});
```

--------------------------------

### FileReaderJS.setupBlob

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Configures a file blob for reading using FileReaderJS, specifying read format and event handlers.

```APIDOC
## FileReaderJS.setupBlob(blob, config)

### Description
Configure file blob for reading.

### Parameters
- blob (Blob) - File blob to read
- config (object) - Configuration object
  - readAsDefault (string) - Read format, defaults to "ArrayBuffer"
  - on (object) - Event handlers
    - load (function(e, file)) - Callback when file is loaded

### Example
```javascript
FileReaderJS.setupBlob(file, {
  readAsDefault: "ArrayBuffer",
  on: {
    load: function(e, file) {
      var arrayBuffer = e.target.result;
      // Process PPTX data
    }
  }
});
```
```

--------------------------------

### JSZip()

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Creates a new JSZip instance for handling PPTX archives, allowing loading of binary data and accessing individual files.

```APIDOC
## new JSZip()

### Description
Create new ZIP archive instance for PPTX handling.

### Methods
- load(arrayBuffer): Load PPTX binary data
- file(path): Get file from archive as text or binary

### Example
```javascript
var zip = new JSZip();
zip = zip.load(arrayBuffer);
var slideXml = zip.file("ppt/slides/slide1.xml").asText();
```
```

--------------------------------

### Enable Presentation Mode with Reveal.js Framework

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/configuration.md

Configure presentation mode to use the reveal.js library. Specify the path to reveal.js using `revealjsPath`.

```javascript
// Reveal.js framework
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  slideMode: true,
  slideType: "revealjs",
  revealjsPath: "./lib/reveal.js"
});
```

--------------------------------

### Get Vertical Alignment

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/rendering-shapes-content.md

Retrieves the vertical alignment value for text. Supported values include top, middle, bottom, and distributed.

```javascript
function getVerticalAlign(node, slideLayoutSpNode, slideMasterSpNode, type)
```

```css
display: flex;
align-items: center;  /* middle */
justify-content: flex-start;  /* top */
```

--------------------------------

### JSZipUtils.getBinaryContent

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Fetches a binary PPTX file from a given URL using JSZipUtils.

```APIDOC
## JSZipUtils.getBinaryContent(url, callback)

### Description
Fetch binary PPTX file from URL.

### Parameters
- url (string) - File URL
- callback (function(err, content)) - Callback with error or binary content

### Example
```javascript
JSZipUtils.getBinaryContent("path/to/file.pptx", function(err, content) {
  if (err) {
    console.error("Error loading file");
    return;
  }
  var blob = new Blob([content]);
  // Process blob
});
```
```

--------------------------------

### Get Horizontal Alignment

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/rendering-shapes-content.md

Retrieves the horizontal alignment value for text. Supported values include left, center, right, justify, and distributed.

```javascript
function getHorizontalAlign(node, textBodyNode, idx, type, prg_dir, warpObj)
```

```css
text-align: center;
```

--------------------------------

### Load PPTX Data and Extract XML

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Create a JSZip instance, load PPTX binary data, and extract specific XML files from the archive. The 'asText()' method retrieves file content as a string.

```javascript
var zip = new JSZip();
zip = zip.load(arrayBuffer);
var slideXml = zip.file("ppt/slides/slide1.xml").asText();
```

--------------------------------

### Include Necessary CSS Files

Source: https://github.com/meshesha/pptxjs/blob/master/README.md

Include these CSS files for basic styling and chart graphs.

```html
<link rel="stylesheet" href="./css/pptxjs.css">
<link rel="stylesheet" href="./css/nv.d3.min.css"> <!-- for charts graphs -->
```

--------------------------------

### Initialize PPTXjs Conversion

Source: https://github.com/meshesha/pptxjs/blob/master/README.md

Initialize the PPTXjs conversion with various configuration options for file input, scaling, media processing, and slide modes.

```javascript
<script type="text/javascript">
 $("#your_div_id_result").pptxToHtml({
   pptxFileUrl: "path/to/yore_pptx_file.pptx", 
   fileInputId: "upload_pptx_fiile",
   slidesScale: "", //Change Slides scale by percent
   slideMode: false,
   keyBoardShortCut: false,
   mediaProcess: true, /** true,false: if true then process video and audio files */
   jsZipV2: "./js/jszip.min.js", /*flase or 'path/to/jsZip.V2.js' */
   themeProcess: true, /*true (default) , false, "colorsAndImageOnly"*/
   incSlide:{height: 2,width:2 }, /*increase height or/and width by 2 px*/
   slideType: "divs2slidesjs", /*'divs2slidesjs' (default) , 'revealjs'(https://revealjs.com)
   slideModeConfig: {  //divs2slidesjs - on slide mode (slideMode: true)
     first: 1,
     nav: false, /** true,false : show or not nav buttons*/
     navTxtColor: "white", /** color */
     showPlayPauseBtn: false,/** true,false */
     keyBoardShortCut: false, /** true,false */
     showSlideNum: false, /** true,false */
     showTotalSlideNum: false, /** true,false */
     autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
     randomAutoSlide: false, /** true,false ,autoSlide:true */ 
     loop: false,  /** true,false */
     background: "black", /** false or color*/
     transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
     transitionTime: 1 /** transition time in seconds */           
   },
			revealjsConfig: { /* for 'revealjs' settings (https://revealjs.com) */
				transition: 'zoom',
				// backgroundTransition: 'zoom',
				// autoSlide: 5000,
				// loop: true
				slideNumber: true
			}
 });
</script>
```

--------------------------------

### Get Shape Position and Size

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/rendering-shapes-content.md

Extracts or calculates shape position and size. Falls back to layout and master defaults, converts from EMU to pixels, and applies scaling and offsets.

```javascript
function getPosition(slideSpNode, pNode, slideLayoutSpNode, 
                    slideMasterSpNode, sType)
function getSize(slideSpNode, slideLayoutSpNode, slideMasterSpNode)
```

--------------------------------

### Scaled Display with Theme and Media Processing

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

This snippet shows how to load a PPTX from a URL, display it at a scaled size, and enable theme processing and media playback.

```javascript
// Scaled display without slide mode
$("#presentation-container").pptxToHtml({
  pptxFileUrl: "/presentations/deck.pptx",
  slidesScale: "75", // Display at 75% of original size
  themeProcess: true, // Apply theme colors
  mediaProcess: true // Process embedded media
});
```

--------------------------------

### HTML Body Structure

Source: https://github.com/meshesha/pptxjs/blob/master/README.md

Set up the HTML body with a target div for the converted content and an optional file input for uploading PPTX files.

```html
...
  <div id="your_div_id_result"></div>
  optional:
  <input id="upload_pptx_fiile" type="file" />
...
```

--------------------------------

### Get Slide Size and Default Text Style

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

Determines the dimensions (width and height in pixels) of the slides and extracts the default text styling. This information is crucial for rendering slides accurately.

```javascript
var slideSize = getSlideSizeAndSetDefaultTextStyle(zip);
// Returns {width: pixels, height: pixels}
// Also extracts default text style
```

--------------------------------

### PPTX to HTML with Presentation Mode

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/README.md

Enable presentation mode for a more interactive experience. Configure navigation, auto-slide timing, looping, and transitions.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  slideMode: true,
  slideModeConfig: {
    nav: true,
    autoSlide: 5,
    loop: true,
    transition: "fade"
  }
});
```

--------------------------------

### Basic PPTX to HTML Conversion

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Use this snippet for basic conversion of a PPTX file loaded from a URL. It initializes the plugin on a container element.

```javascript
// Basic usage - load PPTX from URL
$("#presentation-container").pptxToHtml({
  pptxFileUrl: "/presentations/sample.pptx"
});
```

--------------------------------

### Slide Relationships Example

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

This XML snippet shows how slide relationships map shape references (rId) to actual content files like slide layouts, images, or charts. It is used when a shape references an rId to find its corresponding content.

```xml
<Relationships>
  <Relationship Id="rId1" 
    Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout"
    Target="../slideLayouts/slideLayout1.xml"/>
  <Relationship Id="rId2" 
    Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image"
    Target="../media/image1.png"/>
  <Relationship Id="rId3" 
    Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/chart"
    Target="../charts/chart1.xml"/>
</Relationships>
```

--------------------------------

### Initialize PPTX to HTML Conversion

Source: https://github.com/meshesha/pptxjs/blob/master/index.html

Initializes the PPTXjs conversion process. Specify the PPTX file URL and configure various display options like slide mode, keyboard shortcuts, and navigation.

```javascript
$("#result").pptxToHtml({
  pptxFileUrl: "Sample_12.pptx",
  fileInputId: "uploadFileInput",
  slideMode: false,
  keyBoardShortCut: false,
  slideModeConfig: {
    //on slide mode (slideMode: true)
    first: 1,
    nav: false,
    /** true,false : show or not nav buttons*/
    navTxtColor: "white",
    /** color */
    navNextTxt: "&#8250;">",
    navPrevTxt: "&#8249;", //"<"
    showPlayPauseBtn: false,
    /** true,false */
    keyBoardShortCut: false,
    /** true,false */
    showSlideNum: false,
    /** true,false */
    showTotalSlideNum: false,
    /** true,false */
    autoSlide: false,
    /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
    randomAutoSlide: false,
    /** true,false ,autoSlide:true */
    loop: false,
    /** true,false */
    background: "black",
    /** false or color*/
    transition: "default",
    /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
    transitionTime: 1
    /** transition time in seconds */
  }
});
```

--------------------------------

### Load PPTX from URL

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Load a presentation directly from a URL and render all slides as static HTML divs stacked vertically.

```javascript
$("#presentation-container").pptxToHtml({
  pptxFileUrl: "/presentations/sample.pptx"
});
```

--------------------------------

### Include Required Libraries

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Include these core pptxjs files and optional libraries for charts, bullets, slide mode, and presentation frameworks like Reveal.js.

```html
<!-- Core pptxjs files -->
<link rel="stylesheet" href="./css/pptxjs.css">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jszip.min.js"></script>
<script src="./js/filereader.js"></script>
<script src="./js/pptxjs.js"></script>

<!-- For charts -->
<link rel="stylesheet" href="./css/nv.d3.min.css">
<script src="./js/d3.min.js"></script>
<script src="./js/nv.d3.min.js"></script>

<!-- For bullets -->
<script src="./js/dingbat.js"></script>

<!-- For slide mode -->
<script src="./js/divs2slides.js"></script>

<!-- Optional: for reveal.js presentation mode -->
<script src="./revealjs/reveal.js"></script>
```

--------------------------------

### Load PPTX Binary into JSZip

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

Loads the PowerPoint presentation's binary data into a JSZip object for further processing. This is the initial step in parsing the PPTX file.

```javascript
var zip = new JSZip();
zip = zip.load(arrayBuffer);  // Load PPTX binary into JSZip
```

--------------------------------

### Configure Auto-Play and Transitions

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Configures auto-play, transition effects, looping, and background for slide presentations. Requires jQuery.

```javascript
// With auto-play and transition
$("#slides-container").divs2slides({
  autoSlide: 3, // Auto-advance every 3 seconds
  transition: "fade",
  transitionTime: 0.5,
  loop: true,
  background: "#333"
});
```

--------------------------------

### Initialize Slide Presentation

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Basic slide navigation with slide number display. Requires jQuery.

```javascript
// Basic slide navigation
$("#slides-container").divs2slides({
  nav: true,
  showSlideNum: true,
  showTotalSlideNum: true
});
```

--------------------------------

### Configure Blob Reading with Event Handlers

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Set up a file blob for reading with specified format and event handlers. The 'load' event handler receives the ArrayBuffer result and the file object.

```javascript
FileReaderJS.setupBlob(file, {
  readAsDefault: "ArrayBuffer",
  on: {
    load: function(e, file) {
      var arrayBuffer = e.target.result;
      // Process PPTX data
    }
  }
});
```

--------------------------------

### Enable Theme Processing

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Verify that theme processing is enabled. If colors are still not applied, try enabling 'colorsAndImageOnly' mode.

```javascript
// Verify theme processing is enabled
themeProcess: true  // default
// If still not working, try:
themeProcess: "colorsAndImageOnly"
```

--------------------------------

### Configure Reveal.js Path

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

Set the `revealjsPath` option to the correct relative path for Reveal.js. If Reveal.js is not found at this path, presentation mode will fail silently.

```javascript
revealjsPath: "./revealjs/reveal.js"  // Default relative path
```

--------------------------------

### PPTX Archive Structure Overview

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

Illustrates the hierarchical organization of files and directories within a standard PPTX ZIP archive according to the OOXML specification.

```text
presentation.pptx/
├── [Content_Types].xml          # Content type definitions
├── _rels/
│   └── .rels                     # Package relationships
├── docProps/
│   ├── app.xml                   # Document properties (version, app)
│   ├── core.xml                  # Core properties (title, author)
│   └── thumbnail.jpeg            # Presentation thumbnail
└── ppt/
    ├── presentation.xml          # Main presentation metadata
    ├── presProps.xml             # Presentation properties
    ├── viewProps.xml             # View properties
    ├── tableStyles.xml           # Predefined table styles
    ├── theme/
    │   └── theme1.xml            # Color/font scheme (may have multiple)
    ├── slides/
    │   ├── slide1.xml            # Slide content (one per slide)
    │   ├── slide2.xml
    │   └── _rels/
    │       ├── slide1.xml.rels   # Relationships for each slide
    │       └── slide2.xml.rels
    ├── slideLayouts/
    │   ├── slideLayout1.xml      # Layout templates
    │   └── _rels/
    │       └── slideLayout1.xml.rels
    ├── slideMasters/
    │   ├── slideMaster1.xml      # Master slide definitions
    │   └── _rels/
    │       └── slideMaster1.xml.rels
    ├── media/                    # Embedded objects (OLE, etc.)
    │   ├── image1.png            # Embedded images
    │   ├── video1.mp4            # Embedded videos
    │   └── audio1.mp3            # Embedded audio
    └── embeddings/               # Embedded objects (OLE, etc.)
```

--------------------------------

### Configure Theme and Media Processing

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/configuration.md

Use these options to control how presentation themes and embedded media are processed. Set `themeProcess` to `true`, `"colorsAndImageOnly"`, or `false`. Enable `mediaProcess` to extract and convert audio/video.

```javascript
// Full theme processing with media
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  themeProcess: true,
  mediaProcess: true
});

// Colors and images only, no complex theme effects
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  themeProcess: "colorsAndImageOnly"
});

// No theme, no media
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  themeProcess: false,
  mediaProcess: false
});

// Using JSZip v2
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  jsZipV2: "./lib/jszip-v2.min.js"
});
```

--------------------------------

### pptxToHtml Options Object

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

Configuration options for the $.fn.pptxToHtml(options) function, covering file input, display, presentation mode, and processing settings.

```javascript
{
  // File input options
  pptxFileUrl: string,
  fileInputId: string,
  
  // Display options
  slidesScale: string,
  incSlide: {
    width: number,
    height: number
  },
  
  // Presentation mode
  slideMode: boolean,
  slideType: string,     // "divs2slidesjs" | "revealjs"
  revealjsPath: string,
  keyBoardShortCut: boolean,
  
  // Processing options
  mediaProcess: boolean,
  jsZipV2: string | boolean,
  themeProcess: boolean | string,  // true | false | "colorsAndImageOnly"
  
  // Slide mode configuration
  slideModeConfig: {
    first: number,
    nav: boolean,
    navTxtColor: string,
    keyBoardShortCut: boolean,
    showSlideNum: boolean,
    showTotalSlideNum: boolean,
    autoSlide: boolean | number,
    randomAutoSlide: boolean,
    loop: boolean,
    background: string | boolean,
    transition: string,
    transitionTime: number
  },
  
  // Reveal.js configuration
  revealjsConfig: {
    [key: string]: any
  }
}
```

--------------------------------

### File Upload Loading

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Enable users to upload a PPTX file via a file input. The plugin will then convert and display the presentation.

```javascript
$("#presentation-container").pptxToHtml({
  fileInputId: "file-upload"
});
```

--------------------------------

### Fetch Binary PPTX File Content

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Retrieve the binary content of a PPTX file from a given URL. Handles errors during fetching and provides the content to a callback function.

```javascript
JSZipUtils.getBinaryContent("path/to/file.pptx", function(err, content) {
  if (err) {
    console.error("Error loading file");
    return;
  }
  var blob = new Blob([content]);
  // Process blob
});
```

--------------------------------

### Enable Presentation Mode with Custom Framework

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/configuration.md

Activate presentation mode with the custom `divs2slidesjs` framework. This enables single-slide display and keyboard navigation.

```javascript
// Custom divs2slides framework
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  slideMode: true,
  slideType: "divs2slidesjs",
  keyBoardShortCut: true
});
```

--------------------------------

### Explicitly Load JSZip v2

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

Use the `jsZipV2` option to specify the path to JSZip v2 when global JSZip v3 is loaded. A page reload is required after this option is used.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "deck.pptx",
  jsZipV2: "./js/jszip-v2.min.js"
});
```

--------------------------------

### PPTX to HTML with File Upload

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/README.md

Allow users to upload their own PPTX files for conversion. Specify the ID of the file input element.

```javascript
$("#slides").pptxToHtml({
  fileInputId: "file-input"
});
```

--------------------------------

### Configure Reveal.js Integration with pptxjs

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/configuration.md

Integrate with reveal.js by passing a revealjsConfig object directly to the pptxToHtml method. This allows for advanced presentation features supported by reveal.js.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  slideMode: true,
  slideType: "revealjs",
  revealjsConfig: {
    transition: 'zoom',
    autoSlide: 5000,  // 5 seconds
    loop: true,
    slideNumber: 'c/t',  // "current / total"
    overview: true,
    touch: true
  }
});
```

--------------------------------

### Log Application Version

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

Logs the Office PowerPoint application version to the console for informational purposes. This message is non-fatal.

```javascript
console.log("create by Office PowerPoint app verssion: ", app_verssion_str)
```

--------------------------------

### Include Necessary JavaScript Files

Source: https://github.com/meshesha/pptxjs/blob/master/README.md

Include these JavaScript files for PPTXjs functionality, including dependencies like jQuery, jszip, and d3 for charts.

```html
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/dingbat.js"></script> <!--for bullets -->
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slidesjs.js"></script> <!-- for slide show -->
```

--------------------------------

### Reveal.js Presentation Integration

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Integrate with Reveal.js for a presentation interface supporting keyboard/mouse controls. Configure Reveal.js specific options like transition and auto-slide.

```javascript
$("#presentation-container").pptxToHtml({
  pptxFileUrl: "/presentations/talk.pptx",
  slideMode: true,
  slideType: "revealjs",
  revealjsConfig: {
    transition: 'zoom',
    autoSlide: 5000,
    slideNumber: true
  }
});
```

--------------------------------

### pptxToHtml Method

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Converts a PowerPoint file to HTML. This is the primary method for rendering presentations.

```APIDOC
## $.fn.pptxToHtml(options)

### Description
Converts a PowerPoint file to HTML. This is the primary method for rendering presentations.

### Method
jQuery Plugin Method

### Parameters
- **options** (object) - Configuration object for pptxToHtml. See Configuration Reference for details.

### Returns
- jQuery object (chainable)

### Example
```javascript
var $container = $("#slides");
$container.pptxToHtml({pptxFileUrl: "deck.pptx"});
```
```

--------------------------------

### Basic PPTX to HTML Conversion

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/README.md

Use this snippet for basic conversion of a PPTX file to HTML. Specify the URL of the PPTX file.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx"
});
```

--------------------------------

### Configure Slide Display and Scaling

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/configuration.md

Adjust the visual presentation of slides. Use `slidesScale` to resize slides by percentage and `incSlide` to add pixel dimensions to width and height.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "deck.pptx",
  slidesScale: "75",  // Display at 75% size
  incSlide: {
    width: 10,   // Add 10px width
    height: 20   // Add 20px height
  }
});
```

--------------------------------

### Enable Keyboard Navigation

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Enables keyboard shortcuts for slide navigation and play/pause controls. Requires jQuery.

```javascript
// Keyboard controlled
$("#slides-container").divs2slides({
  keyBoardShortCut: true,
  nav: true,
  showPlayPauseBtn: true
});
```

--------------------------------

### PPTXjs Core API

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/MANIFEST.txt

This section details the main jQuery plugin `pptxToHtml()` and the Presentation plugin `divs2slides()`, along with integrations and internal functions.

```APIDOC
## Main jQuery Plugin: pptxToHtml()

### Description
Converts a PPTX file into HTML content.

### Method
jQuery Plugin

### Endpoint
N/A (jQuery Plugin)

### Parameters
Refer to `configuration.md` for detailed parameter information.

### Request Example
```javascript
$("#myElement").pptxToHtml({ /* options */ });
```

### Response
HTML content representing the PPTX presentation.

## Presentation Plugin: divs2Slides()

### Description
Transforms HTML divs into slides, likely for presentation frameworks.

### Method
Plugin Function

### Endpoint
N/A (Plugin Function)

### Parameters
Refer to `configuration.md` for detailed parameter information.

### Request Example
```javascript
pptxjs.divs2Slides(htmlContent, { /* options */ });
```

### Response
Slide elements ready for presentation.

## Integrations

### FileReaderJS Integration
Handles file reading operations for PPTX files.

### JSZip Integration
Utilizes JSZip for processing the internal structure of PPTX archives.
```

--------------------------------

### Enable Interactive Presentation Mode

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/INDEX.md

Configure pptxjs for interactive slide mode, allowing navigation and auto-sliding. Set 'nav' to true for navigation controls and 'autoSlide' for timed transitions.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "presentation.pptx",
  slideMode: true,
  slideModeConfig: {nav: true, autoSlide: 5}
});
```

--------------------------------

### Extracting Slide Size and Default Text Style

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/pptx-structure-processing.md

Parses the main presentation file to extract slide dimensions and default text formatting. Slide dimensions are in EMU and converted to pixels.

```xml
<p:presentation>
  <p:sldSz cx="9144000" cy="6858000" type="screen16by9"/>
  <!-- Slide dimensions in EMU (English Metric Units)
       9144000 EMU = 10 inches = 960 pixels (at 96 DPI)
       6858000 EMU = 7.5 inches = 720 pixels -->
  
  <p:notesSz cx="12192000" cy="9144000"/>
  
  <p:defTextStyle>
    <!-- Default text formatting inherited by all shapes -->
    <a:lvl1pPr .../>
    <!-- Font properties for each outline level -->
  </p:defTextStyle>
</p:presentation>
```

--------------------------------

### Optimize pptxjs for Mobile Devices

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Use a smaller slides scale and process only colors and images for themes to enhance performance on mobile. Enable media processing for HTML5 video/audio support and use slide mode for a better presentation experience.

```javascript
$"#slides".pptxToHtml({
  pptxFileUrl: "deck.pptx",
  
  slidesScale: "50",            // Mobile screen typically smaller
  themeProcess: "colorsAndImageOnly",  // Faster than full theme
  mediaProcess: true,           // Mobile supports HTML5 video/audio
  
  slideMode: true,              // Full-screen presentation friendly
  slideModeConfig: {
    transition: "fade",         // Smooth on mobile
    transitionTime: 0.5
  }
});
```

--------------------------------

### genShape

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/rendering-shapes-content.md

Generates HTML and CSS for a shape, considering its properties, transformations, and text content.

```APIDOC
## genShape

### Description
Generates HTML and CSS for a shape, including its markup and styles.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Method
None

### Endpoint
None

### Request Example
None

### Response
#### Success Response (200)
- **Returns** (HTML string) - HTML string with shape markup and styles

### Response Example
None

### Function Signature
`function genShape(node, pNode, slideLayoutSpNode, slideMasterSpNode, id, name, idx, type, order, warpObj, isUserDrawnBg, sType, source)`

### Parameters
- **node** (Shape node) - Description not specified
- **pNode** (Parent node) - Description not specified
- **slideLayoutSpNode** (Shape from slide layout (for defaults)) - Description not specified
- **slideMasterSpNode** (Shape from slide master (for defaults)) - Description not specified
- **id** (Shape identifier) - Description not specified
- **name** (Shape name) - Description not specified
- **idx** (Index in parent) - Description not specified
- **type** (Shape type) - Description not specified
- **order** (Rendering order) - Description not specified
- **warpObj** (Processing context) - Description not specified
- **isUserDrawnBg** (Whether shape is background) - Description not specified
- **sType** (Slide type) - Description not specified
- **source** (Source type) - Description not specified
```

--------------------------------

### Log Presentation Size Type

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

Logs the presentation's size type to the console for informational purposes. This message is non-fatal.

```javascript
console.log("Presentation size type: ", sldSzType)
```

--------------------------------

### Handle Missing Theme File

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

This code indicates the scenario where a slide master's theme reference is missing. The themeFilename becomes undefined, and default colors are used instead of theme colors.

```javascript
// Theme processing logic where themeFilename might become undefined
// ...
// Theme colors not applied to shapes
// Shapes render with default colors instead
// No error logged; processing continues
```

--------------------------------

### Optimize Performance for Large Presentations

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/INDEX.md

Improve performance for large presentations by disabling theme and media processing, and scaling slides. Set 'themeProcess' and 'mediaProcess' to false, and 'slidesScale' to a desired percentage.

```javascript
$("#slides").pptxToHtml({
  pptxFileUrl: "large.pptx",
  themeProcess: false,
  mediaProcess: false,
  slidesScale: "60"
});
```

--------------------------------

### Read XML File with Error Handling

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

This function attempts to read and parse an XML file from a zip archive. It returns null if the file is not found or if there's a parsing error.

```javascript
function readXmlFile(zip, filename, isSlideContent) {
  try {
    var fileContent = zip.file(filename).asText();
    var xmlData = tXml(fileContent, { simplify: 1 });
    // ...
  } catch (e) {
    return null;  // File not found or parse error
  }
}
```

--------------------------------

### Relationship Object Structure

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/types.md

Represents a file relationship within the PPTX structure, including its ID, type, and target path. Used for parsing the PPTX structure.

```javascript
{
  id: string,         // Relationship ID (e.g., "rId1")
  type: string,       // Relationship type category
                      // "slideLayout" | "slideMaster" | "theme" | 
                      // "image" | "chart" | "hyperlink" | etc.
  target: string      // Target file path relative to archive root
}
```

--------------------------------

### Process Missing Relationship Files

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/errors.md

This snippet illustrates handling a missing relationship file (_rels/slide.xml.rels) for a slide. If the file is not found, the function returns null, potentially leading to undefined RelationshipArray.

```javascript
var resContent = readXmlFile(zip, resName);
// If null, RelationshipArray will be undefined
var RelationshipArray = resContent["Relationships"]["Relationship"];
```

--------------------------------

### Optimize pptxjs for Large Presentations

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/quick-reference.md

Disable unnecessary processing like theme and media to improve performance for large presentations. Reduce slide dimensions and avoid slide mode for faster loading.

```javascript
$"#slides".pptxToHtml({
  pptxFileUrl: "large.pptx",
  
  // Skip processing not needed:
  themeProcess: false,          // Saves: gradient fills, color mapping
  mediaProcess: false,          // Saves: video/audio embedding
  
  // Reduce visual complexity:
  slidesScale: "60",            // Smaller = faster
  incSlide: {width: -10, height: -10},  // Reduce dimensions
  
  // Don't use slideMode if just viewing:
  slideMode: false              // No presentation overhead
});
```

--------------------------------

### genGlobalCSS()

Source: https://github.com/meshesha/pptxjs/blob/master/_autodocs/api-reference.md

Generates global CSS rules for slide styling, including classes for various presentation elements and styling based on PowerPoint geometry and formatting.

```APIDOC
## genGlobalCSS()

### Description
Generates global CSS rules for slide styling. This method produces a CSS string containing classes for slide containers, text blocks, shape elements, and transition/animation effects.

### Method
JavaScript Function

### Endpoint
N/A (JavaScript Function)

### Parameters
None

### Request Example
```javascript
const cssString = pptxjs.genGlobalCSS();
```

### Response
#### Success Response
- **CSS String** (string) - A string containing generated CSS rules.

### Response Example
```css
.slide { ... }
.block { ... }
.shape { ... }
/* ... other classes */
```
```