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.

Adobe Inc.

Ensemble

Adobe Embedded PDF Viewer is a FREE plugin that allows you to easily embed high-fidelity PDF viewing into your posts and pages with collaboration, security, and analytics. Deliver the highest quality PDF rendering available and streamline user experiences with custom viewer modes and digital collaboration through annotation tools. Extend the viewer with PDF usage analytics to understand how users interact with your documents.
Embedded PDFs can be displayed in four PDF viewer modes:
<ul>
<li>Lightbox: Displays PDF files in a modal.</li>
<li>Sized Container: Displays PDF files in a presentation-style container with landscape orientation. Each page of the embedded PDF file appears as a slide. This is the default mode that applies to all embedded PDFs.</li>
<li>In-Line: Displays PDF files inline within the content of the page or post itself. When using this mode, all pages within the embedded PDF file are displayed at once.</li>
<li>Full Window: The viewing area fits the size of the parent element and can be customized to cover the entire browser window. Unlike the Sized Container mode, which also fits the size of the parent element, the Full Window mode allows your visitors to use annotation tools, navigate pages using PDF thumbnails, and access other features of the Full Window embed mode of the <a href="https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#full-window-embed-mode" rel="nofollow ugc">Adobe PDF Embed API</a>.</li>
</ul>
The plugin allows you to control how PDF files are displayed on your website and what viewer options your visitors have access to.
Adobe Embedded PDF Viewer is JavaScript-based and uses the <a href="https://developer.adobe.com/document-services/apis/pdf-embed/" rel="nofollow ugc">Adobe PDF Embed API</a> to display PDFs in the browser.
Adobe Embedded PDF Viewer is part of Adobe Acrobat Services, cloud-based REST APIs, SDKs, and integrations to automate digital document workflows for PDF creation, conversion, PDF content extraction, document generation with signatures, and more. Learn more at <a href="https://developer.adobe.com/document-services/" rel="nofollow ugc">Adobe Acrobat Services</a>
By installing and activating this plugin, you acknowledge that you agree to the <a href="https://www.adobe.com/legal/terms.html" rel="nofollow ugc">Adobe General Terms of Use</a>. To learn more about how user data may be collected or used, please see the <a href="https://www.adobe.com/privacy/policy.html" rel="nofollow ugc">Adobe Privacy Policy</a>.
<h3>Key features</h3>
<ul>
<li>FREE plugin for high fidelity PDF viewing from the company that created the PDF standard.</li>
<li>Quickly display embedded PDF documents on your website using four unique viewer modes.</li>
<li>Add security to your published files by disabling printing and downloading of your PDFs in all four PDF viewer modes.</li>
<li>Embed PDFs with the Adobe Embedded PDF Viewer block in the Gutenberg editor.</li>
</ul>
<h4>Lightbox embed mode</h4>
<ul>
<li>Choose the type of the modal close button between the standard close button (“X”) on the right side of the modal header and the back arrow on the left side of the modal header.</li>
<li>Control the initial appearance of the modal to either fit the screen vertically or zoom in to fit the window width.</li>
</ul>
<h4>Sized Container embed mode</h4>
<ul>
<li>Control the width and height of the viewing area.</li>
<li>Enable or disable the option to toggle the full-screen mode.</li>
<li>Dock the page control toolbar to the bottom of the viewing area or configure it as a floating overlay.</li>
</ul>
<h4>In-Line embed mode</h4>
<ul>
<li>Control the width of the viewing area.</li>
</ul>
<h4>Full Window embed mode</h4>
<ul>
<li>Control the width and height of the viewing area.</li>
<li>Show or hide annotation tools that include text comments, sticky notes, a highlighting tool, drawing and eraser tools, and undo/redo options.</li>
<li>Control the initial appearance of PDF pages to either fit the viewing area vertically or zoom in to fit the viewing area width.</li>
</ul>
<blockquote>
Note: In Full Window embed mode, the PDF viewing area fits the size of the parent element.
</blockquote>
<h3>Getting started</h3>
To use Adobe Embedded PDF Viewer, you need a client ID (API key). To get a client ID, follow these steps:
<ol>
<li>Visit the <a href="https://www.adobe.com/go/onboarding_embedapi" rel="nofollow ugc">Adobe Acrobat Services website</a>, complete the required fields and select Create Credentials.</li>
<li>Once complete, copy the client ID (API key) from your project’s console.</li>
<li>In your WordPress admin dashboard, navigate to Adobe Embedded PDF Viewer > General Settings and paste the client ID into the Client ID (API Key) field.</li>
</ol>
You can integrate the plugin with your Adobe Analytics account (requires separate licensing). Navigate to Adobe Embedded PDF Viewer > General Settings, enter your Report Suite ID in the field, and follow the steps outlined in the guide on <a href="https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtodata/" rel="nofollow ugc">configuring Adobe Analytics</a> to correctly map the data from Embedded PDF Viewer to your Analytics report suite.
<h3>Usage</h3>
The plugin provides the Embedded PDF Viewer block for the Gutenberg editor. See the <a href="https://wordpress.com/support/wordpress-editor/" rel="nofollow ugc">block editor usage guide</a> for instructions on how to work with blocks in WordPress.
In the Gutenberg editor, you can embed a PDF using the following steps:
<ol>
<li>Toggle Block Inserter in the top-left corner of the editor and search for Adobe Embedded PDF Viewer. You can find it under the Embed category.</li>
<li>Add the block to your post or page and select Media Library. In the dialog, select or upload the PDF file you want to embed. The preview of your PDF appears in the editor.</li>
<li>You can configure the viewer settings for your PDF in the Block settings tab in the right sidebar of the editor. Sized Container is the default embed mode for the Gutenberg editor.</li>
</ol>
<blockquote>
Note: Sized Container is the default embed mode for the Embedded PDF Viewer block, and the site-wide embed mode settings do not apply. You can change the embed mode for individual PDFs using the Block settings tab in the right sidebar.
</blockquote>

Adobe Embedded PDF Viewer

Embed PDF files into your posts and pages and display them in a modal, a presentation-style container, full-screen, or inline.

Jimmy Codeviewer vs Adobe Embedded PDF Viewer