Code Monkey home page Code Monkey logo

prismjs-copy-paste-highlighter-tool's Introduction

Simple PrismJS Code Syntax Highlighting Authoring Tool

Simple web page using PrismJS color syntax highlighter to generate formatted code for authoring.

Useful for pasting color syntax highlighted code into Apple software like Keynote and Pages so it can be copied by others who have a edoc or pdf version, in other words instead of screen shot images pasted in.

Useful in general for screen shots to add to other authoring software.

Uses PHP to support theme switching.

Sample themes in repo are PrismJS 1.15.0 and include all languages.

You need to download the particular theme to the themes folder you want and modify the HTML code for it by adding or modifying the links in the <div class="center-box center-text color-black"> container.

Example <a href="?theme=default" >Default</a>&nbsp;|

Sample screen.

Sample screen

Demo UI list dropdown only has a small set of languages however sample themes in repo include all languages. You need to include the languages you want when you download the theme. Then modify the <select id="source-code-language" > element <option... elements for the languages.

Example: <option value="html">HTML</option>

Language option value needs to come from the Prism supported languages you included.

Set start line number value to blank if you do not want line numbers.

This code was not designed to be a perfect polished rich feature set. Just some basics for authoring with copyable color syntax highlighed code in Apple Keynote.

Issues:

  1. Copy/Paste: You cannot copy the line numbers and vertical bar. Best workaround is to create a second text or shape/text object in the target software and simply number using the same font and background color then use the align tools. Add a verticle line if you want a divider. Another is to screen shot the output area.

  2. Saw Keynote crash intermittently when pasting. It may be that the copy included areas outside the output box. Still investigating. Workround is to try copying again and only using the area in the output box and delete any previous paste in the target software. Bottom line its a Apple issue.

  3. Some font sizes might cause issues with line number alignment. PrismJS issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.