Git Product home page Git Product logo

preview-vscode's Introduction

preview-vscode

A previewer of Markdown, ReStructured Text, HTML, Jade, Mermaid files, Image's URI or CSS properties for Visual Studio Code

README

An extension to preview Markdown, ReStructured Text, HTML, Jade or Mermaid files, Image's URI or CSS while editing them in VSCode

The extension can be activated in two ways

  • Toggle Preview
    • Linux & Windows: ctrl+shift+v
    • MAC:cmd+shift+v or ctrl+shift+v
  • Open|Close Preview to the Side
    • Linux & Windows: ctrl+k v
    • MAC:cmd+k v or ctrl+k v

Just press the same key when you want to go back to the original view.

DETAIL

  • If file type is Markdown, ReStructured Text, HTML, Jade or Mermaid
    • Just do as the operation as mentioned.
  • If file type is CSS
    • Just click on a CSS property between{}
    • Just do as the operation as mentioned.
  • If file type is other
    • Just click on a
      • image URI (/http[s]{0,1}://|file://|\s[.]{0,2}//).
        • for example: http://, https://, file://, /, ./
      • css properities ({})
        • for example: {color: blue}
      • others as Markdown, ReStructured Text, HTML, Jade or Mermaid
        • for ReStructured Text, docutils is the first choice, and rst2mdown is plan B.
    • Just do as the operation as mentioned and a showQuickPick will pop up to show choices.
    • Demonstration

Note

python and docutils are recommended to be installed to Preview ReStructured Text to preview the rst more accurately.

Contributing

  • If you want to develop and debug this extension from source code, and run 'npm install' under the root dir of this extension,

  • npm packages vscode and typescript is needed as an environment

    npm install vscode
    npm install typescript
  • Cannot find module 'vscode'? Please run 'npm run postinstall' under the root dir of this extension, according to Cannot find module 'vscode' โ€“ where is vscode.d.ts now installed? #2810

  • Node.js's version is too old ? following this two ways, choose one:

    • NodeSource Node.js Binary Distributions, and you will get the latest version installed automatically !
    • install n to maintain the version
      • install module n

        sudo npm install -g n
      • update Node.js

        • latest stable version

          sudo n stable
        • any version

          sudo n 7.6.0
          sudo n v7.6.0
        • manually update

          • explore for the version you want, click this to explore->>
          • download the node file, such as v7.3.0
            # Broken-point Continuingly-transferring is supported.
            wget -c https://nodejs.org/download/release/v7.3.0/node-v7.3.0-linux-x64.tar.gz
          • install Node.js, such as v7.3.0
            mkdir -p /usr/local/n/versions/node/
            tar -zxvf node-v7.3.0-linux-x64.tar.gz 7.3.0/
            ln -sf /usr/local/n/versions/node/7.3.0/bin/node /usr/bin/node
  • Node Package's version is too old? following this way:

    • install module npm-check
      npm install -g npm-check
    • check for installed npm packages's version
      # set flag -g for global packages, else for local packages
      npm-check -u
    • do as npm-check tells
  • Meet NPM problem: npm ERR! extraneous when you run npm list? Please run 'npm prune -x' to clean unneeded packages, according to NPM problem: npm ERR! extraneous

  • 'vsce publish' failed?

    Executing prepublish script 'node ./node_modules/vscode/bin/compile'...
    Error: Command failed: node ./node_modules/vscode/bin/compile
    
    • execute this command and you will get the error message in the console
      npm run vscode:prepublish
    • fix the error and retry 'vsce publish'

Thanks to

preview-vscode's People

Contributors

searking avatar mrmyhuang avatar

Watchers

Ovidiu Pescar 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.