Kenta Ishii

Jimmy Codeviewer is a shortcode library to load text, SVG (Scalable Vector Graphics) and other scripts to WordPress pages. By using this plugin, you can reduce quantity of your code, e.g., if you want to put a proportional sample of programming code in your page, you just type one shortcode, then you get the sample with line numbers and colored words which you intended. In addition, you can make pages with layout similar to magazines on paper by using “magazine”, a theme template.
<h4>Introduction</h4>
In my first mind, I purposed to make a viewer for programming code for my site that introduces my articles. It was OK and named this plugin as “Jimmy Codeviewer”. But in making “Jimmy Codeviewer”, I think this could be a multipurpose text viewer. On this time, many news sites have very simple layout for their contents. You could watch magazines or papers at a news-stand everyday, and these are so colorful and design-riches. I just want these on Internet. Colorful design-riches actually make us some attention and affection. Web browsers are growing their rendering ability right now. This challenge — making magazines or newspapers on Internet — not a dream, but a real on Internet. In addition, I tried to change WordPress to SVG-Free. SVG (Scalable Vector Graphics) is one of vector graphics containers. It’s just like HTML and JavaScrpt. This is exactly the reason why WordPress Community prohibits to upload SVG Files by Media Uploader. If SVGs are programming codes, these should be stored as scripts in pages. But “Posts” and “Pages” are having their own purposes as public pages. So I decided to make “jArticles”, inner pages and store texts, SVGs and scripts to “jArticles”. For loading “jArticles” on “Posts”, I made several WordPress shortcodes.
Jimmy Codeviewer consists of three departments which have several WordPress shortcodes and functions.
I. Code Viewer
a. Shortcodes: [codeview_byid] and [codeview_byname] to show text in “Posts”.
b. Edit Instructions: <code>(edit(exam-ple))</code> to make HTML markup or other escaped literal codes in “jArticles” pages.
c. Style Sheet: CSS Style Sheet to make web layout easier with Code Viewer.
II. Article Loader
a. Shortcodes: [articleloader_byid] and [articleloader_byname] to show SVGs or other scripts in “Posts”.
III. Color and Style Changer
a. Shortcodes: [init_spansearch], [spansearch] and [spansearch_all] to change the text color and other styles. [divsearch] to change the row styles.
b. JavaSctipt: ‘spanSearch’ and its family, the engine to provide the above shortcodes to function.
<h4>Copyright</h4>
The Jimmy Codeviewer, A WordPress Plugin, Copyright 2017 Kenta Ishii 
Jimmy Codeviewer is distributed under the terms of the GNU GPL
This program is free software: you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation, either version 2 of the License, or 
(at your option) any later version.
This program is distributed in the hope that it will be useful, 
but WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
GNU General Public License for more details.

Jimmy Codeviewer

Jimmy Codeviewer is a shortcode library to load text, SVG (Scalable Vector Graphics) and other scripts to WordPress pages.

Francesco Martini

After installing this plugin, you will be able to upload various ebook formats as normal media files and to display them on your site using a shortcode.
Every ebook uploaded on your site will have an “ebook slug” (by default it will be the ebook name) that you can view and edit in the Edit Media page of the Admin Panel.
The full source code of the plugin is hosted on <a href="https://github.com/wrCisco/simple-ebook-viewer-for-wp" rel="nofollow ugc">GitHub</a>.
Supported formats 
At the moment, the plugin will let you upload and display the following file types, provided that they are DRM-free:
<ul>
<li>epub</li>
<li>mobi</li>
<li>azw</li>
<li>azw3</li>
<li>fb2</li>
<li>fbz</li>
<li>cbz</li>
<li>pdf</li>
</ul>
Usage 
Insert the shortcode <code>[simebv_viewer book="MY_EBOOK_SLUG_HERE"]</code> in any one of your posts.
Styling 
You can add css styles and classes for the viewer container by adding these attributes to the shortcode:
<ul>
<li><code>height</code></li>
<li><code>width</code></li>
<li><code>max-height</code></li>
<li><code>max-width</code></li>
<li><code>border</code></li>
<li><code>style</code></li>
<li><code>class</code></li>
</ul>
Height, width, max-height, max-width and border accept any valid CSS value for those properties. 
Style and class accept any valid value for the respective HTML attributes.
Some examples:
<pre><code>[simebv_viewer book="MY_EBOOK_SLUG_HERE" style="height:30em;border:2px inset black"]

[simebv_viewer book="MY_EBOOK_SLUG_HERE" max-height="100vh" height="40em"]

[simebv_viewer book="MY_EBOOK_SLUG_HERE" class="my-container-class my-container-second-class"]

/* You can overwrite the default font family of the Viewer's UI
 with the CSS variable --simebv-ui-font-family */
[simebv_viewer book="MY_EBOOK_SLUG_HERE" style="--simebv-ui-font-family:monospace;"]
</code></pre>
Settings
The users of your site will be able to set their preferences about the appearance of the ebook in the Viewer by opening the Viewer menu (the cog icon on the top right) and by selecting the appropriate entries.
The plugin sets some reasonable defaults for these preferences, but if you’re not happy with those defaults, you can change them by adding one or more of the following attributes to the shortcode, with the appropriate values.
Reflowable ebooks
<ul>
<li><code>layout</code>
<ul>
<li>accepted values: “paginated” or “scrolled” (default: paginated)</li>
</ul>
</li>
<li><code>default-font-size</code>
<ul>
<li>accepted values: “small“, “medium“, “large“, “x-large” (default: medium)</li>
</ul>
</li>
<li><code>font-family</code>
<ul>
<li>accepted_values: “auto“, “serif“, “sans-serif“, “monospace“, “opendyslexic” (default: auto)</li>
</ul>
</li>
<li><code>page-margins</code>
<ul>
<li>accepted values: “small“, “medium“, “large” (default: medium)</li>
</ul>
</li>
<li><code>text-align</code>
<ul>
<li>accepted values: “auto“, “left“, “center“, “right“, “justify” (default: auto)</li>
</ul>
</li>
<li><code>line-height</code>
<ul>
<li>accepted values: “auto“, “tight“, “medium“, “ample” (default: “auto“)</li>
</ul>
</li>
<li><code>hyphenation</code>
<ul>
<li>accepted values: “auto“, “yes“, “no” (default: “auto“)</li>
</ul>
</li>
<li><code>show-page-delimiters</code>
<ul>
<li>accepted values: “true“, “false” (default: false)</li>
</ul>
</li>
</ul>
Fixed Layout
<ul>
<li><code>zoom</code>
<ul>
<li>accepted values: “fit-page“, “fit-width” or a number in the range 10 – 400 (default: fit-page)</li>
</ul>
</li>
<li><code>reading-order</code>
<ul>
<li>accepted values: “auto“, “ltr“, “rtl” (default: auto)</li>
</ul>
</li>
</ul>
PDFs and Comic books (cbz)
<ul>
<li><code>first-page</code>
<ul>
<li>accepted values: “left“, “right” (default: right)</li>
</ul>
</li>
</ul>
All ebooks
<ul>
<li><code>show-annotations</code>
<ul>
<li>accepted values: “true“, “false” (default: false)</li>
</ul>
</li>
<li><code>color-scheme</code>
<ul>
<li>accepted values: “auto“, “sepia“, “light“, “dark“, “light-forced“, “dark-forced” (default: auto)</li>
</ul>
</li>
<li><code>pagination-style</code>
<ul>
<li>accepted values: “slider“, “pages“, “percent” (default: slider)</li>
</ul>
</li>
<li><code>max-pages</code>
<ul>
<li>accepted values: 1, 2, 3 or 4 (default: 2) 
(3 and 4 are accepted only for reflowable ebooks)</li>
</ul>
</li>
</ul>
Max-pages is the maximum number of pages (in the “paginated” layout) that the user will be able to see in a single view (if there is enough screen space).
Show-annotations and show-page-delimiters let the user see on the pages the Calibre annotations (as highlighted text, if there are Calibre annotations in the ebook) and the page delimiters (as short vertical bars, if the ebook contains a page list).
The reading-order sets the page progression of the ebook (ltr -> left-to-right, rtl -> right-to-left), not the text direction inside the pages.
Color-scheme: “auto” means that the Viewer will adapt to the preferred color-scheme set by the user on their device or browser (light or dark).
For most ebooks these preferences should be enough, but sometimes there are ebooks with style rules that don’t play well with the styles set by the Viewer, so the users have also the option to apply some filters to the Viewer’s colors (with the menu entry “Color filter…”).
You can set the default values for these filters with the following shortcode’s attributes:
<ul>
<li><code>activate-color-filter</code>
<ul>
<li>accepted values: “true“, “false” (default: false)</li>
</ul>
</li>
<li><code>invert-color-filter</code>
<ul>
<li>accepted values: a number in the range 0 – 1 (default: 0)</li>
</ul>
</li>
<li><code>rotate-color-filter</code>
<ul>
<li>accepted values: a number in the range 0 – 360 (default: 0)</li>
</ul>
</li>
<li><code>bg-transparent-filter</code>
<ul>
<li>accepted values: “true“, “false” (default: true)</li>
</ul>
</li>
<li><code>bg-color-filter</code>
<ul>
<li>accepted values: a valid CSS hex color code (default: #FFFFFF)</li>
</ul>
</li>
</ul>
Setting activate-color-filter to “true” is necessary to enable all the other filters, and setting bg-transparent-filter to false is necessary to enable bg-color-filter.
Bg-transparent-filter and bg-color-filter are available for reflowable ebooks only.
Invert-color-filter inverts the lightness of the colors. With a value of 0 it has no effect, with a value of 1, white become black and black become white.
Rotate-color-filter rotates the hues of all the colors in the ebook, like on a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel" rel="nofollow ugc">Color Wheel</a> (so, no effect on black and white).
There are some other settings that the users won’t be able to change by themselves. These are:
<ul>
<li><code>always-full-viewport</code>
<ul>
<li>accepted values: “true“, “false” (default: false. If true, return-to-url is also required)</li>
</ul>
</li>
<li><code>return-to-url</code>
<ul>
<li>accepted values: a URL with the same hostname as the page that contains the ebook viewer (default: ”)</li>
</ul>
</li>
<li><code>real-fullscreen</code>
<ul>
<li>accepted values: “true“, “false” (default: false)</li>
</ul>
</li>
<li><code>allow-js</code>
<ul>
<li>accepted values: “true“, “false” (default: false)</li>
</ul>
</li>
<li><code>math-styles</code>
<ul>
<li>accepted values: “fonts“, “styles“, “all” (default: ”)</li>
</ul>
</li>
<li><code>ebook-author</code>
<ul>
<li>accepted values: any string, max 260 characters (default: ”)</li>
</ul>
</li>
<li><code>ebook-title</code>
<ul>
<li>accepted values: any string, max 260 characters (default: ”)</li>
</ul>
</li>
<li><code>popup-notes</code>
<ul>
<li>accepted values: “true“, “false” (default: true)</li>
</ul>
</li>
</ul>
With always-full-viewport set to “true”, the ebook viewer will automatically cover the entire webpage when it is opened, and the “full screen” icon will be replaced by a “close viewer” icon. always-full-viewport=”true” requires that also return-to-url is present, with a valid URL that indicates the destination of the user when they choose to close the viewer. The URL can be relative (e.g., “/” or “/books-gallery”) or absolute. In either case, it must have the same hostname as the webpage containing the ebook viewer (e.g. if the viewer is at https://www.example.com/ebook-viewer, the absolute URL must start with https://www.example.com).
If real-fullscreen is set to “true”, the ebook viewer will cover the entire screen instead of only the viewport of the webpage when the user clicks on the “full screen” icon. With real-fullscreen set to true, always-full-viewport is ignored, since the full screen requires an explicit action by the user.
Allow-js: normally, the plugin forbids, as far as possible, script execution from inside the ebooks. If you set allow-js to true, this restriction is relaxed, and scripts within the ebook can be executed. 
Caveat 1: you need to be absolutely certain that the code inside the ebook is not malicious, since it can harm your entire webpage. 
Caveat 2: the ebook viewer is not strongly equipped to deal with dynamic content created or removed after the ebook opening, so you might encounter errors or inaccuracies when jumping from one ebook location to another in such a circumstance.
Math-styles: in recent years all the major browsers have implemented a good deal of the MathML Core specification, so it is now possible to represent natively many mathematical expressions without the use of third party libraries. However, not all browsers and systems load automatically appropriate fonts. With math-styles set to “fonts” or “all”, all the contents of MathML expression will use the Latin Modern font. 
Another shortcoming in the current support of MathML is that only Gecko based browsers (i.e. Firefox) implement a breaking lines algorithm, so long math expressions within small screens usually don’t fit entirely. With math-styles set to “styles” or “all”, the plugin will use some html+css tricks to try to allow either line breaks or horizontal scrolling.
Ebook-author and ebook-title: you can use these optional values to override the ones that the ebook viewer retrieves from the ebook metadata in order to display them to the users.
Popup-notes: show footnotes and endnotes as popups instead of just links. The notes (and their references) need to be marked with the appropriate epub:type attributes to ensure that they are displayed as popups (the ebook viewer will try to recognize them anyway, but without guarantees).
<h3>Warning</h3>
Ebooks can contain scripted content that might be executed on your webpage. The plugin does its best to forbid script execution from inside the loaded content, but it can’t guarantee 100% safety. Don’t display ebooks from untrusted sources and/or check your ebooks before uploading and displaying them. If you can, provide a strict Content Security Policy for your site.
<h3>Credits</h3>
This plugin embeds a modified version of the foliate-js library 
by John Factotum (https://github.com/johnfactotum/foliate-js), 
which is distributed under the MIT license.
As secondary dependencies of the foliate-js library, the plugin embeds three other libraries:
<ul>
<li>zip.js (https://github.com/gildas-lormeau/zip.js), licensed under the BSD-3-Clause;</li>
<li>fflate (https://github.com/101arrowz/fflate), MIT licensed.</li>
<li>PDF.js (https://github.com/mozilla/pdf.js), licensed under the Apache v2.0 license.</li>
</ul>
Other libraries embedded by the plugin are:
<ul>
<li>vite-for-wp by Dzikri Aziz (https://github.com/kucrut/vite-for-wp), 
licensed under the GPL v2.0 license</li>
<li>Speech Rule Engine (https://github.com/Speech-Rule-Engine/speech-rule-engine), 
licensed under the Apache v2.0 license</li>
</ul>
Embedded fonts:
<ul>
<li>OpenDyslexic (https://opendyslexic.org/) by Abbie Gonzales, licensed under the SIL Open Font License v1.1;</li>
<li>Manrope (https://github.com/sharanda/manrope) by The Manrope Project Authors, licensed under the SIL Open Font License v1.1;</li>
<li>Latin Modern (https://www.gust.org.pl/projects/e-foundry) by the Polish TeX Users Group, licensed under the GUST Font License.</li>
</ul>
OpenDyslexic and Latin Modern fonts have been converted from their original OpenType format to the woff2 format for use on the web, without, to the best of my knowledge, modifying their internal parameters and metadata.

Simple Ebook Viewer

Embed and display Ebooks in your website.

Jimmy Codeviewer vs Simple Ebook Viewer