### Setup Documentation Website Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/extra.md Clone the repository and use docsify-cli to serve the documentation locally. Ensure npm is installed globally. ```bash # install docsify npm i docsify-cli -g cd path_to/markdown-preview-enhanced docsify serve docs ``` -------------------------------- ### Install from GitHub Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/installation.md Steps to install the package by cloning the repository from GitHub. This involves navigating to the cloned directory, installing dependencies with yarn, and then linking the package to Atom. ```bash cd the_path_to_folder/markdown-preview-enhanced yarn install apm link # <- This will copy markdown-preview-enhanced folder to ~/.atom/packages ``` -------------------------------- ### eBook Metadata Configuration Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ebook.md An example of configuring specific metadata for an ebook, including title, author, and rating. ```yaml ebook: title: My eBook author: shd101wyy rating: 5 ``` -------------------------------- ### Global Configuration Script Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/config.md An example of the global `config.js` script used to configure Markdown Preview Enhanced. This script allows for customization of KaTeX, MathJax, and Mermaid rendering. ```javascript ({ katexConfig: { macros: {}, }, mathjaxConfig: { tex: {}, options: {}, loader: {}, }, mermaidConfig: { startOnLoad: false, }, }); ``` -------------------------------- ### Install Plugins via CocInstall Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/vim-installation.md Use this command in Vim/Neovim's command mode to directly install the required plugins. ```vim CocInstall coc-markdown-preview-enhanced coc-webview ``` -------------------------------- ### Install ebook-convert on macOS Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ebook.md This command creates a symbolic link to the ebook-convert tool after installing Calibre on macOS. ```shell sudo ln -s ~/Applications/calibre.app/Contents/MacOS/ebook-convert /usr/local/bin ``` -------------------------------- ### Inline Code Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/markdown_output.md Demonstrates how to format inline code using backticks. ```markdown Inline `code` ``` -------------------------------- ### eBook Look and Feel Configuration Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ebook.md This example shows how to configure the look and feel of the generated ebook, including base font size and margins. ```yaml ebook: title: My eBook base-font-size: 8 margin: 72 ``` -------------------------------- ### Install via Terminal Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/installation.md Use this command to install the package directly from the terminal using the Atom Package Manager (apm). ```bash apm install markdown-preview-enhanced ``` -------------------------------- ### Bash Code Snippet Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/code-chunk.md A basic bash code snippet example. ```bash bash ``` -------------------------------- ### Reveal.js Notes Integration Setup Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/revealjs_deps/notes.html Initializes the speaker notes functionality by setting up event listeners for messages from the Reveal.js presentation. ```javascript (function() { var notes, notesValue, currentState, currentSlide, upcomingSlide, layoutLabel, layoutDropdown, connected = false; var SPEAKER_LAYOUTS = { 'default': 'Default', 'wide': 'Wide', 'tall': 'Tall', 'notes-only': 'Notes only' }; setupLayout(); window.addEventListener('message', function(event) { var data = JSON.parse(event.data); // The overview mode is only useful to the reveal.js instance // where navigation occurs so we don't sync it if (data.state) delete data.state.overview; // Messages sent by the notes plugin inside of the main window if (data && data.namespace === 'reveal-notes') { if (data.type === 'connect') { handleConnectMessage(data); } else if (data.type === 'state') { handleStateMessage(data); } } // Messages sent by the reveal.js inside of the current slide preview else if (data && data.namespace === 'reveal') { if (/ready/.test(data.eventName)) { // Send a message back to notify that the handshake is complete window.opener.postMessage(JSON.stringify({ namespace: 'reveal-notes', type: 'connected' }), '*'); } else if (/slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test(data.eventName) && currentState !== JSON.stringify(data.state)) { window.opener.postMessage(JSON.stringify({ method: 'setState', args: [data.state] }), '*'); } } }); /** * Called when the main window is trying to establish a * connection. */ function handleConnectMessage(data) { if (connected === false) { connected = true; setupIframes(data); setupKeyboard(); setupNotes(); setupTimer(); } } /** * Called when the main window sends an updated state. */ function handleStateMessage(data) { // Store the most recently set state to avoid circular loops // applying the same state currentState = JSON.stringify(data.state); // No need for updating the notes in case of fragment changes if (data.notes) { notes.classList.remove('hidden'); notesValue.style.whiteSpace = data.whitespace; if (data.markdown) { notesValue.innerHTML = marked(data.notes); } else { notesValue.innerHTML = data.notes; } } else { notes.classList.add('hidden'); } // Update the note slides currentSlide.contentWindow.postMessage(JSON.stringify({ method: 'setState', args: [data.state] }), '*'); upcomingSlide.contentWindow.postMessage(JSON.stringify({ method: 'setState', args: [data.state] }), '*'); upcomingSlide.contentWindow.postMessage(JSON.stringify({ method: 'next' }), '*'); } // Limit to max one state update per X ms handleStateMessage = debounce(handleStateMessage, 200); /** * Forward keyboard events to the current slide window. * This enables keyboard events to work even if focus * isn't set on the current slide iframe. */ function setupKeyboard() { document.addEventListener('keydown', function(event) { currentSlide.contentWindow.postMessage(JSON.stringify({ method: 'triggerKey', args: [event.keyCode] }), '*'); }); } /** * Creates the preview iframes. */ function setupIframes(data) { var params = [ 'receiver', 'progress=false', 'history=false', 'transition=none', 'autoSlide=0', 'backgroundTransition=none' ].join('&'); var urlSeparator = /\?/.test(data.url) ? '&' : '?'; var hash = '#/' + data.state.indexh + '/' + data.state.indexv; var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash; var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash; currentSlide = document.createElement('iframe'); currentSlide.setAttribute('width', 1280); currentSlide.setAttribute('height', 1024); currentSlide.setAttribute('src', currentURL); document.querySelector('#current-slide').appendChild(currentSlide); upcomingSlide = document.createElement('iframe'); upcomingSlide.setAttribute('width', 640); upcomingSlide.setAttribute('height', 512); upcomingSlide.setAttribute('src', upcomingURL); document.querySelector('#upcoming-slide').appendChild(upcomingSlide); } /** * Setup the notes UI. */ function setupNotes() { notes = document.querySelector('.speaker-controls-notes'); notesValue = document.querySelector('.speaker-controls-notes .value'); } function getTimings() { var slides = Reveal.getSlides(); var defaultTiming = Reveal.getConfig().defaultTiming; if (defaultTiming == null) { return null; } var timings = []; for (var i in slides) { var slide = slides[i]; var timing = defaultTiming; if (slide.hasAttribute('data-timing')) { var t = slide.getAttribute('data-timing'); timing = parseInt(t); if (isNaN(timing)) { console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming); timing = defaultTiming; } } timings.push(timing); } return timings; } /** * Return the number of seconds allocated for presenting * all slides up to and including this one. ``` -------------------------------- ### LaTeX Chemfig Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/demo.md Renders a LaTeX document with chemfig package for chemical structures. Ensure LaTeX environment is set up. ```latex \documentclass{standalone} \usepackage[utf8]{inputenc} \usepackage[english]{babel} \usepackage{chemfig} \begin{document} \vspace{.5cm} \chemfig{A*6(-B=C(-CH_3)-D-E-F(=G)=)} \end{document} ``` -------------------------------- ### Setup Speaker View Layouts Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/revealjs_deps/notes.html Initializes the speaker view layout dropdown and label. It populates the dropdown with available layouts and sets the initial layout. ```javascript function setupLayout() { layoutDropdown = document.querySelector( '.speaker-layout-dropdown' ); layoutLabel = document.querySelector( '.speaker-layout-label' ); // Render the list of available layouts for( var id in SPEAKER_LAYOUTS ) { var option = document.createElement( 'option' ); option.setAttribute( 'value', id ); option.textContent = SPEAKER_LAYOUTS[ id ]; layoutDropdown.appendChild( option ); } // Monitor the dropdown for changes layoutDropdown.addEventListener( 'change', function( event ) { setLayout( layoutDropdown.value ); }, false ); // Restore any currently persisted layout setLayout( getLayout() ); } ``` -------------------------------- ### Develop Mode Installation Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/installation.md Command to install the package in development mode, allowing for direct code modifications within Atom. After code changes, the Atom window needs to be reloaded. ```bash apm develop markdown-preview-enhanced ``` -------------------------------- ### ERD Command Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/code-chunk.md This shows the command-line invocation for the ERD tool, specifying output format and arguments. ```bash erd {cmd=true output="html" args=["-i", "$input_file", "-f", "svg"]} ``` -------------------------------- ### Basic eBook Configuration Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ebook.md Configure ebook generation by adding 'ebook front-matter' to your markdown file. This example sets the theme, title, and authors. ```yaml --- ebook: theme: github-light.css title: My eBook authors: shd101wyy --- ``` -------------------------------- ### eBook Configuration with Table of Contents Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ebook.md This example demonstrates setting up ebook configuration and defining a Table of Contents (TOC) within a markdown file. The last list in the markdown file is treated as the TOC. ```markdown --- ebook: theme: github-light.css title: Markdown Preview Enhanced author: shd101wyy --- # Preface This is the preface, but not necessary. # Table of Contents - [Chapter 1](/chapter1/README.md) - [Introduction of Markdown Preview Enhanced](/chapter1/intro.md) - [Features](/chapter1/feature.md) - [Chapter 2](/chapter2/README.md) - [Known issues](/chapter2/issues.md) ``` -------------------------------- ### Install pdf2svg on macOS Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/extra.md Use Homebrew to install the pdf2svg utility on macOS. ```bash brew install pdf2svg ``` -------------------------------- ### Run Node.js Code Chunk Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/code-chunks-test.html Execute a Node.js code chunk directly within the preview. This example logs a greeting with the current date. ```javascript console.log("Hello Markdown Preview Enhanced - " + new Date()) ``` -------------------------------- ### Basic Presentation Front-Matter Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/presentation.md Configure presentation dimensions by adding a 'presentation' section to your markdown file's front-matter. This example sets the width to 800 and height to 600. ```markdown --- presentation: width: 800 height: 600 --- Your slides goes here... ``` -------------------------------- ### Importing PDF Files Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/file-imports.md Local or online PDF files can be imported. Ensure you have `pdf2svg` installed. Note that importing large PDFs is not recommended. ```markdown @import "test.pdf" ``` -------------------------------- ### Viz.js Directed Graph Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/test.md A Viz.js (DOT language) directed graph example. Shows nodes, edges, labels, and port-based edge routing. ```viz digraph g { node [shape=plaintext]; A1 -> B1; A2 -> B2; A3 -> B3; A1 -> A2 [label=f]; A2 -> A3 [label=g]; B2 -> B3 [label="g'"]; B1 -> B3 [label="(g o f)'" tailport=s headport=s]; { rank=same; A1 A2 A3 } { rank=same; B1 B2 B3 } } ``` -------------------------------- ### Plotly Path Data Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/code-chunks-test.html Example of path data for a Plotly plot, defining a series of points and their coordinates. This data is used to render complex shapes and lines. ```json "paths": [[[[0.0, 0.03029594814510799], [0.0, 0.010098649381702664], [1.0, 0.03009308901874427], [2.0, 0.008531394008467332], [3.0, 0.00947672969152776], [4.0, 0.013544044190901902], [5.0, 0.025662529310311426], [6.0, 0.022523680090903907], [7.0, 0.04254279376549618], [8.0, 0.026998931245324154], [9.0, 0.027433425540745526], [10.0, 0.014332349451042347], [11.0, 0.03048020633888368], [12.0, 0.021609360566031285], [13.0, 0.021882770146931498], [14.0, -0.0006962248953324354], [15.0, 0.0041071943600747025], [16.0, -0.00010374000302320989], [17.0, 0.007394757863776021], [18.0, 0.03185316718212289], [19.0, 0.029309288527020583], [20.0, 0.015890394465663715], [21.0, 0.035130937770937176], [22.0, 0.01962757332125432], [23.0, 0.037817769945057624], [24.0, 0.030648583124105067], [25.0, 0.035021815032631784], [26.0, 0.013634559530638985], [27.0, 0.03342296626258298], [28.0, 0.04741222641559896], [29.0, 0.04810910073455643], [30.0, 0.07117405259810605], [31.0, 0.06636179384398837], [32.0, 0.04477446076963708], [33.0, 0.0555866220521318], [34.0, 0.04628031239049567], [35.0, 0.04180595844296176], [36.0, 0.05633453279692678], [37.0, 0.03764371014605859], [38.0, 0.019144855878031983], [39.0, 0.017959089927266112], [40.0, 0.02562613698007794], [41.0, 0.009209848189171949], [42.0, 0.0016074027201446739], [43.0, -0.002062610142612176], [44.0, -0.019874942880981898], [45.0, 0.003729238335279026], [46.0, -0.015317444610325213], [47.0, -0.01720773579345401], [48.0, -0.030229597572734763], [49.0, -0.052670842818479315], [50.0, -0.06396178728914846], [51.0, -0.07752122159937441], [52.0, -0.09744841590732597], [53.0, -0.07601163994457816], [54.0, -0.0850252031786042], [55.0, -0.08746254988483089], [56.0, -0.09797854911206452], [57.0, -0.10840661328191868], [58.0, -0.10747743861211491], [59.0, -0.0854520171142233], [60.0, -0.10590818447388246], [61.0, -0.12000483487065172], [62.0, -0.14227598940389766], [63.0, -0.12340347094103678], [64.0, -0.14190451548774255], [65.0, -0.14594524953293814], [66.0, -0.12703009442832264], [67.0, -0.1518480800318851], [68.0, -0.14315720440144933], [69.0, -0.12316199395487368], [70.0, -0.13427504934573353], [71.0, -0.15263543540855537], [72.0, -0.15508875178967618], [73.0, -0.18001432969645212], [74.0, -0.1585360919697553], [75.0, -0.13676966106763613], [76.0, -0.1297856349543816], [77.0, -0.12083938263357524], [78.0, -0.12686278641251306], [79.0, -0.14976988729439486], [80.0, -0.13780984999361862], [81.0, -0.15885954706500802], [82.0, -0.16276116391915593], [83.0, -0.15331815084104583], [84.0, -0.14595985405777434], [85.0, -0.1390117225490798], [86.0, -0.14311808447838342], [87.0, -0.12073518613353595], [88.0, -0.10828456256495561], [89.0, -0.08489623194187208], [90.0, -0.10011443298939117], [91.0, -0.09306899278995989], [92.0, -0.0737302903705673], [93.0, -0.06386103646806116], [94.0, -0.08596528510223785], [95.0, -0.07162553174493899], [96.0, -0.07797679249063445], [97.0, -0.08764278023456415], [98.0, -0.07711503468824127], [99.0, -0.08451279783087964], [99.0, -0.25353839349263896], [99.0, -0.25353839349263896], [98.0, -0.2313451040647238], [97.0, -0.2629283407036924], [96.0, -0.23393037747190337], [95.0, -0.21487659523481697], [94.0, -0.25789585530671355], [93.0, -0.19158310940418347], [92.0, -0.2211908711117019], [91.0, -0.2792069783698797], [90.0, -0.3003432989681735], [89.0, -0.25468869582561626], [88.0, -0.32485368769486683], [87.0, -0.36220555840060786], [86.0, -0.42935425343515027], [85.0, -0.41703516764723947], [84.0, -0.437879562173323], [83.0, -0.4599544525231375], [82.0, -0.48828349175746777], [81.0, -0.476578641195024], [80.0, -0.41342954998085585], [79.0, -0.44930966188318455], [78.0, -0.3805883592375392], [77.0, -0.36251814790072573], [76.0, -0.38935690486314484], [75.0, -0.41030898320290843], [74.0, -0.4756082759092659], [73.0, -0.5400429890893563], [72.0, -0.46526625536902855], [71.0, -0.4579063062256661], [70.0, -0.4028251480372006], [69.0, -0.369485981864621], [68.0, -0.429471613204348], [67.0, -0.4555442400956553], [66.0, -0.3810902832849679], [65.0, -0.4378357485988144], [64.0, -0.4257135464632277], [63.0, -0.37021041282311035], [62.0, -0.426827968211693], [61.0, -0.36001450461195517], [60.0, -0.3177245534216474], [59.0, -0.2563560513426699], [58.0, -0.32243231583634474], [57.0, -0.32521983984575603], [56.0, -0.2939356473361936], [55.0, -0.2623876496544927], [54.0, -0.2550756095358126], [53.0, -0.22803491983373447], [52.0, -0.2923452477219779], [51.0, -0.23256366479812324], [50.0, -0.19188536186744537]]] ``` -------------------------------- ### Plotly Figure Configuration Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/code-chunks-test.html An example of a Plotly figure configuration object, detailing axes properties, including limits, scales, grid settings, and the definition of lines and markers within the plot. This configuration is used by mpld3 to draw the figure. ```json {"axes": [{"xlim": [0.0, 100.0], "yscale": "linear", "axesbg": "#FFFFFF", "texts": [{"v_baseline": "hanging", "h_anchor": "middle", "color": "#000000", "text": "x", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [0.5, -0.059895833333333329], "rotation": -0.0, "id": "el329044447559184"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "y", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 12.0, "position": [-0.085685483870967735, 0.5], "rotation": -90.0, "id": "el329044447784272"}, {"v_baseline": "auto", "h_anchor": "middle", "color": "#000000", "text": "Interactive legend", "coordinates": "axes", "zorder": 3, "alpha": 1, "fontsize": 20.0, "position": [0.5, 1.0144675925925926], "rotation": -0.0, "id": "el329044448028368"}], "zoomable": true, "images": [], "xdomain": [0.0, 100.0], "ylim": [-0.80000000000000004, 1.0], "paths": [], "sharey": [], "sharex": [], "axesbgalpha": null, "axes": [{"scale": "linear", "tickformat": null, "grid": {"color": "#000000", "alpha": 0.3, "dasharray": "2,2", "gridOn": true}, "visible": true, "fontsize": 12.0, "position": "bottom", "nticks": 6, "tickvalues": null}, {"scale": "linear", "tickformat": null, "grid": {"color": "#000000", "alpha": 0.3, "dasharray": "2,2", "gridOn": true}, "visible": true, "fontsize": 12.0, "position": "left", "nticks": 10, "tickvalues": null}], "lines": [{"drawstyle": "default", "color": "#0000FF", "yindex": 1, "coordinates": "data", "dasharray": "none", "zorder": 2, "alpha": 1, "xindex": 0, "linewidth": 1.0, "data": "data01", "id": "el329044448249808"}, {"drawstyle": "default", "color": "#007F00", "yindex": 2, "coordinates": "data", "dasharray": "none", "zorder": 2, "alpha": 1, "xindex": 0, "linewidth": 1.0, "data": "data01", "id": "el329044448367824"}, {"drawstyle": "default", "color": "#FF0000", "yindex": 3, "coordinates": "data", "dasharray": "none", "zorder": 2, "alpha": 1, "xindex": 0, "linewidth": 1.0, "data": "data01", "id": "el329044448420240"}, {"drawstyle": "default", "color": "#00BFBF", "yindex": 4, "coordinates": "data", "dasharray": "none", "zorder": 2, "alpha": 1, "xindex": 0, "linewidth": 1.0, "data": "data01", "id": "el329044448423248"}, {"drawstyle": "default", "color": "#BF00BF", "yindex": 5, "coordinates": "data", "dasharray": "none", "zorder": 2, "alpha": 1, "xindex": 0, "linewidth": 1.0, "data": "data01", "id": "el329044448471376"}], "markers": [], "id": "el329044447432400", "ydomain": [-0.80000000000000004, 1.0], "collections": [{"paths": [[[[0.0, -0.05464326170104024], [0.0, -0.018214420567013414], [1.0, -0.03143653685608183], [2.0, -0.02364487121426363], [3.0, -3.119982311371172e-05], [4.0, -0.022753730514453945], [5.0, -0.04133622045764808], [6.0, -0.0347481933927822], [7.0, -0.04625245077970726], [8.0, -0.06718139912498683], [9.0, -0.06398331555061017], [10.0, -0.07968552267726449], [11.0, -0.06465153422252568], [12.0, -0.039748700043610474], [13.0, -0.05777523004448368], [14.0, -0.07997536628612645], [15.0, -0.07558740208550893], [16.0, -0.05932130265558824], [17.0, -0.0732711162087626], [18.0, -0.06202336519701331], [19.0, -0.05084062002532874], [20.0, -0.06881260483146921], [21.0, -0.059650217364836486], [22.0, -0.03976738003088673], [23.0, -0.028196772812128457], [24.0, -0.014706620204698217], [25.0, -0.0179182612474707], [26.0, -0.01485156264548737], [27.0, -0.03644488704845903], [28.0, -0.053189164230250385], [29.0, -0.05080513077732534], [30.0, -0.02680325781634344], [31.0, -0.0029531574923348583], [32.0, 0.013291196700068984], [33.0, 0.01019314024760871], [34.0, 0.029927541034421086], [35.0, 0.0175589288213429], [36.0, 0.01216215177358434], [37.0, -0.007013289289287445], [38.0, 0.009492725749557977], [39.0, 0.02354295703749376], [40.0, 0.022807505173247766], [41.0, 0.027089982884731224], [42.0, 0.02762109488705949], [43.0, 0.002850347686608936], [44.0, 0.01626696812033642], [45.0, 0.029211154592921985], [46.0, 0.01835831048923814], [47.0, -0.004830263119021273], [48.0, 0.001752361343625157], [49.0, 0.026512430070858333], [50.0, 0.009098731331510915], [51.0, -0.008289224653122856], [52.0, 0.01662545968233982], [53.0, 0.015588612357075423], [54.0, 0.00469176826825329], [55.0, -0.004495138239895223], [56.0, 0.015752816248436573], [57.0, 0.020962700875703687], [58.0, 0.03717489244929022], [59.0, 0.05709810816889235], [60.0, 0.03660483351873708], [61.0, 0.021062683599836183], [62.0, 0.030411831498787838], [63.0, 0.05531330013137809], [64.0, 0.03230148860740489], [65.0, 0.030411831498787838]]]}], "type": "mpld3_PathCollection", "id": "el329044448471376", "facecolor": "#BF00BF", "edgecolor": "#BF00BF", "linewidth": 1.0, "zorder": 2, "alpha": 1, "paths": [], "offset": [0.0, 0.0], "marker": null, "markerurl": null, "markersize": 6, "antialiased": true, "visible": true, "offsetcoordinates": "data"}]}} ``` -------------------------------- ### Standard Citation Syntax Examples Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/pandoc-bibliographies-and-citations.md Illustrates various ways to format citations within square brackets, including prefixes, locators, and multiple citations separated by semicolons. ```markdown Blah blah [see @doe99, pp. 33-35; also @smith04, ch. 1]. Blah blah [@doe99, pp. 33-35, 38-39 and *passim*]. Blah blah [@smith04; @doe99]. ``` -------------------------------- ### Plotly Pie Chart Example Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/code-chunks-test.md Creates a pie chart with Plotly. Requires the Plotly.js library and a specified div element for rendering. ```javascript var data = [{ values: [19, 26, 55], labels: ['Residential', 'Non-Residential', 'Utility'], type: 'pie' }]; var layout = { height: 400, width: 500 }; Plotly.newPlot('tester2', data, layout); ``` -------------------------------- ### Configure Vimrc for Plugin Installation Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/vim-installation.md Add this line to your vimrc file to automatically load the extensions upon restarting Vim/Neovim. This method is recommended for easy environment replication. ```vim let g:coc_global_extensions = ['coc-markdown-preview-enhanced', 'coc-webview'] ``` -------------------------------- ### Full Presentation Configuration Settings Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/presentation.md Customize various aspects of your reveal.js presentation, including theme, size, margins, scaling, controls, progress, slide numbers, history, keyboard shortcuts, and transitions. This example shows a comprehensive set of available options. ```yaml --- presentation: # presentation theme # === available themes === # "beige.css" # "black.css" # "blood.css" # "league.css" # "moon.css" # "night.css" # "serif.css" # "simple.css" # "sky.css" # "solarized.css" # "white.css" # "none.css" theme: white.css # The "normal" size of the presentation, aspect ratio will be preserved # when the presentation is scaled to fit different resolutions. Can be # specified using percentage units. width: 960 height: 700 # Factor of the display size that should remain empty around the content margin: 0.1 # Bounds for smallest/largest possible scale to apply to content minScale: 0.2 maxScale: 1.5 # Display controls in the bottom right corner controls: true # Display a presentation progress bar progress: true # Display the page number of the current slide slideNumber: false # Push each slide change to the browser history history: false # Enable keyboard shortcuts for navigation keyboard: true # Enable the slide overview mode overview: true # Vertical centering of slides center: true # Enables touch navigation on devices with touch input touch: true # Loop the presentation loop: false # Change the presentation direction to be RTL rtl: false # Randomizes the order of slides each time the presentation loads shuffle: false # Turns fragments on and off globally fragments: true # Flags if the presentation is running in an embedded mode, # i.e. contained within a limited portion of the screen embedded: false # Flags if we should show a help overlay when the questionmark # key is pressed help: true # Flags if speaker notes should be visible to all viewers showNotes: false # Number of milliseconds between automatically proceeding to the # next slide, disabled when set to 0, this value can be overwritten # by using a data-autoslide attribute on your slides autoSlide: 0 # Stop auto-sliding after user input autoSlideStoppable: true # Enable slide navigation via mouse wheel mouseWheel: false # Hides the address bar on mobile devices hideAddressBar: true # Opens links in an iframe preview overlay previewLinks: false # Transition style transition: 'default' # none/fade/slide/convex/concave/zoom # Transition speed transitionSpeed: 'default' # default/fast/slow # Transition style for full page slide backgrounds backgroundTransition: 'default' # none/fade/slide/convex/concave/zoom # Number of slides away from the current that are visible viewDistance: 3 # Parallax background image parallaxBackgroundImage: '' # e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'" # Parallax background size parallaxBackgroundSize: '' # CSS syntax, e.g. "2100px 900px" # Number of pixels to move the parallax background per slide # - Calculated automatically unless specified # - Set to 0 to disable movement along an axis parallaxBackgroundHorizontal: null parallaxBackgroundVertical: null # Parallax background image parallaxBackgroundImage: '' # e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" # Parallax background size parallaxBackgroundSize: '' # CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) # Number of pixels to move the parallax background per slide # - Calculated automatically unless specified # - Set to 0 to disable movement along an axis parallaxBackgroundHorizontal: 200 parallaxBackgroundVertical: 50 # Enable Speaker Notes enableSpeakerNotes: false --- ``` -------------------------------- ### Plotting a Simple Line Graph Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/code-chunks-test.html A basic example of plotting a list of numbers using Matplotlib. Ensure Matplotlib is imported as plt. ```python plt.plot([1,2,3, 4]) plt.show() # show figure ``` -------------------------------- ### Render Kroki Wavedrom Diagram Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/diagrams.md Enable Kroki diagram rendering by setting `kroki=true` or `kroki=DIAGRAM_TYPE` in code block attributes. This example uses `wavedrom`. ```javascript {signal: [ { name: "clk", wave: "p.....|..." }, { name: "Data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"], }, { name: "Request", wave: "0.1..0|1.0" }, {}, { name: "Acknowledge", wave: "1.....|01." }, ]} ``` -------------------------------- ### Customize Presentation CSS Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/presentation-intro.md Customize the presentation's CSS by running the 'Markdown Preview Enhanced: Customize Css' command and editing the generated CSS file. This example shows how to target all slides or specific slides. ```less .markdown-preview.markdown-preview { .slides { // This will modify all slides. } .slides > section:nth-child(1) { // This will modify `the first slide`. background-color: blue; } } ``` -------------------------------- ### Plotly Interactive Legend Setup Source: https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/test/code-chunks-test.html JavaScript code to set up interactive legend behavior for Plotly charts. It defines functions for handling mouseover and mouseout events to adjust element opacities. ```javascript var alpha_unsel = 0.1; var alpha_over = 1.0; // specify the action on legend overlay function over(d,i){ set_alphas(d, true); }; // specify the action on legend overlay function out(d,i){ set_alphas(d, false); }; // helper function for setting alphas function set_alphas(d, is_over){ for(var i=0; i