Giter Club home page Giter Club logo

screendown's Introduction

Screendown

Screendown

📸 Capture stunning screenshots of your Markdown or code directly in Visual Studio Code with ease.

Visual Studio Marketplace Number of installs Ratings Sponsor the project

Screendown is a tool that allows you to take beautiful and professional-looking screenshots of your Markdown/Code from within Visual Studio Code. With Screendown, you can easily turn your markdown text or code into visually stunning images that will capture the attention of your readers and followers.

Sample image from Screendown

Features

Markdown to screenshot

By converting your Markdown to HTML, you can generate visually appealing images quickly and easily. This approach offers a convenient and efficient method for producing stunning visuals from your Markdown content.

Sample of using Markdown

The following markup is supported:

  • Headings
  • Paragraphs
  • Lists
  • Blockquotes
  • Code blocks / inline code
  • Horizontal rules
  • Images
  • Links
  • Emphasis
  • Strong
  • Tables
  • Strikethrough

HTML to screenshot

If you have HTML content, you can also use Screendown to convert it to an image. This could be useful for creating some cool banners for Twitter, LinkedIn, ...

Sample of using HTML

Code to screenshot

When working with code, the tool will display the code within a code block and apply syntax highlighting based on your current Visual Studio Code theme.

Sample of using Code

Watermarking

You can add a watermark to your image. This can be useful for adding your name/tagline/twitter handle to the image. If you want, you can also add an image, once you do this, the watermark will be combined with the image.

By default, you can place the image on the top or at the bottom, but you can also drag it around to place it wherever you want.

Sample of watermarking

Info: In case you want to add more lines of text, use the \n character to add a new line.

Usage

  • Open the command palette (Ctrl+Shift+P)
  • Search for "Screendown: Take a screenshot"
  • Select some Markdown text (you can also start with selecting Markdown text)

Sample image from Screendown

  • Now you can fiddle with the settings to get the perfect image
  • Click the Take screenshot button

Issues/feedback

If you encounter any issues while using Screendown or have feedback on how to enhance its functionality, please feel free to add it to the Github repository's issue list. Your contributions can help improve Screendown and make it an even better tool for everyone.

Add to our issue list



visitors  visitors

screendown's People

Contributors

estruyf avatar santoshyadavdev avatar

Stargazers

Laura avatar Andvari avatar  avatar Texas Toland avatar Marcus R. Brown avatar CXPLAY avatar  avatar Data Ng avatar  avatar Juan Castorino avatar  avatar  avatar Brian Clark avatar Shashi Kumar Nagulakonda avatar Eduardo Rabelo avatar Jan Riemer avatar Liran Tal avatar Omri Bornstein avatar David Dias avatar 夏目贵志 avatar

Watchers

 avatar  avatar

screendown's Issues

No math support?

Looks like the inline $$ isn't rendered. Will it be supported in the future?

Support for other languages, why not?

Looking for an extension to capture code snippets, I found screendown and found all the flexibility offered to be sensational.
I understand that the purpose is to work with Markdown, but why wouldn't it be better to do this beautiful work with code snippets too? The extension can display the selected section, but it also has the 'selection' in the image. See below.

image

I believe that this improvement would bring more people to keep the extension installed, because instead of having screendown and another like codespan, it would be better to just have screendown.

Note: The purpose of this approach is to bring a suggestion for improvement, if it is not well seen and does not make sense with the essence of it, I apologize for the suggestion.
..
P.S. But that's my wish for the extension. I appreciate your understanding.

Not showing images

image

Trying to get images in my screenshots and I don't get them displayed, is there something I can set...

[Suggestion] Trim description so you can tell what this does in VSCode

I can guess from the name that this extension probably has something to do with screenshots and markdown, but the description should make guessing unnecessary. It doesn't need to repeat the name, since it's already there in the listing, and claiming that it's "easy-to-use" just takes up space that could be spent on saying what it actually does:

image

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.