Sample snippet to demonstrate the use of the Add-in Playground for Excel. -- Shared with Add-in Playground

Purple highlighter.yaml

id: cix17zcbl00004q6q3l13gqdo
gist: ''
source: Excel
author: Microsoft
name: Purple highlighter
description: Sample snippet to demonstrate the use of the Add-in Playground for Excel.
script:
  content: |-
    $('#run').click(function () {
        invokeRun().catch(OfficeHelpers.Utilities.log);
    });

    function invokeRun() {
        return Excel.run(function (context) {
            var range = context.workbook.getSelectedRange();
            range.format.fill.color = "purple";
            return context.sync();
        });
    }
  language: typescript
style:
  content: |-
    .ms-Button, .ms-Button:focus {
        background: #217346;
        border: #217346;
    }

    .ms-Button > .ms-Button-label,
    .ms-Button:focus > .ms-Button-label,
    .ms-Button:hover > .ms-Button-label {
        color: white;
    }

    .ms-Button:hover, .ms-Button:active {
        background: #164b2e;
    }
  language: css
template:
  content: >-
    <p class="ms-font-m">Execute a code snippet in the Add-in Playground for
    Excel</p>

    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run code</span>
    </button>
  language: html
libraries: >-
  // Office.js CDN reference

  https://appsforoffice.microsoft.com/lib/beta/hosted/office.js


  // Other CDN references.

  // Syntax: NPM package name, NPM package path, or raw URL to CDN location.

  core-js/client/core.min.js

  jquery

  @microsoft/office-js-helpers

  office-ui-fabric-core/dist/css/fabric.min.css

  office-ui-fabric-js/dist/css/fabric.components.min.css


  // IntelliSense definitions.

  // Syntax: "dt~library_name" for DefinitelyTyped, "@typings/library_name" for
  Typings, or raw URL to d.ts location.

  dt~core-js

  dt~jquery

  dt~office-js

  @microsoft/office-js-helpers/dist/office.helpers.d.ts