Code Monkey home page Code Monkey logo

notewidget's Introduction

OneNote Widget AddIn

A full featured Markdown viewer with syntax highlighting, export enhancement for OneNote

Features

Markdown Viewer

  • Powered by Markdig - A powerful markdown parser, recommended by Microsoft
  • CommonMark and GitHub flavored Markdown
  • Syntax highlighting support
    • 100+ languages supported
  • Dark/Light color scheme and code highlight theme support
    • Theme auto detection (following OS theme setting)
    • Multiple code highlight themes
  • Mermaid chart support
    • Process, sequence, Gantt diagram etc.
  • Capturing picture in onenote page and display in Markdown viewer
  • Preview Window Refresh (Press F5. 24/6/2022)
  • Auto refresh Preview Window (24/6/2022)
    • Auto refresh Preview Window every 1 second by default
    • Set interval to a large number in Settings Window to disable auto refresh, let's say set interval to 999999999.

Markdown CheatSheet

  • Common mark
  • Extended mark
  • Diagram
    • Mermaid charts

Export enhancement

  • Export for Notebook/Section Group/Section/Page
  • Single File and Hierarchical files options

Demos

Syntax highlighting

    ```csharp
    namespace Demo
    {
        public class MyDemo
        {
            public static void Main(string[] args)
            {
                Console.WriteLine("Hello World!");
            }
        }
    }
    ```

Markdown preview:

    namespace Demo
    {
        public class MyDemo
        {
            public static void Main(string[] args)
            {
                Console.WriteLine("Hello World!");
            }
        }
    }

Mermaid pie chart

    ```mermaid
    pie
      title Key elements in Product X
      "Calcium" : 40
      "Potassium" : 46
      "Magnesium" : 9
      "Iron" :  5

    ```

Markdown preview: <style>#mermaid-1642657277801 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#mermaid-1642657277801 .error-icon{fill:#a44141;}#mermaid-1642657277801 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1642657277801 .edge-thickness-normal{stroke-width:2px;}#mermaid-1642657277801 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1642657277801 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1642657277801 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1642657277801 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1642657277801 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1642657277801 .marker.cross{stroke:lightgrey;}#mermaid-1642657277801 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1642657277801 .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-1642657277801 .pieTitleText{text-anchor:middle;font-size:25px;fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-1642657277801 .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#ccc;font-size:17px;}#mermaid-1642657277801 .legend text{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-1642657277801 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style>40%46%9%5%Key elements in Product XCalciumPotassiumMagnesiumIron

More mermaid chart examples

Preview snapshot

Cheat Sheet snapshot

License

Apache 2.0

notewidget's People

Contributors

efreykongcn avatar

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.