what are you looking for?

How to Give a Killer Presentation With VS-Code ?!?

Published on sun 17 april, 2022.

  • Architecture
  • Visual Studio Code

what is code presentation

In this tutorial, you will learn how to optimally present code from within Visual Studio code. As a developer, being asked to present your code seems to be a very common ask in 2021. Doing code reviews over Zoom, talking about some code that you have written in a remote job interview, talking at a meet-up, or even making YouTube videos are all things I have done within the last week. As the old saying goes, the devil is in the details šŸ˜ˆBeing able to present code in a professional manner is an essential skill nowadays, so how exactly do you present code in a great way in Visual Studio code... read on to learn šŸ”„šŸ”„šŸ”„

Before getting into VS-Code, let us talk about a great free presenting tool for Windows called ZoomIt . ZoomIt will allow you to either zoom in on certain areas on your screen or annotate the screen while you are presenting. ZoomIt has been created by Microsoft for technical presentation, it's free, so there's no harm in trying it out!

After installing ZoomIt, you can use the shortcut key Ctrl and 1 to Zoom in on the screen where your mouse is currently located. The shortcut combo of Ctrl and 2 will annotate the screen. Within annotation mode, you can either annotate freehand, draw a box, circle or arrow šŸ‘‰šŸ»šŸ‘‰šŸ¼šŸ‘‰šŸ½šŸ‘‰šŸ¾šŸ‘‰šŸæ

Better Live Coding

Coding on its own is hard enough, so is presenting. Trying to do both at the same time exponentially doubles up the chances of mistakes from occurring. Having to worry about live coding in your presentations, just adds a new source of stress. Typos, syntax issues, code that does not compile are the things that make people who present code wake up in the middle of the night with sweats. Instead of doing live coding in a talk, you can use a handy extension called HackerTyper . Hacker Typer allows you to record yourself programming ahead of time. Hacker Typer records all your keystrokes within VS-Code into a buffer. After recording and saving your keystrokes, you can then replay the same sequence again later. In your presentation, you can wildly mash any key on your keyboard and your code will appear on screen how you expect it to and in the right locations. Using Hacker Typer makes it look like you are live coding, however, it allows you to concentrate on making your talk points rather than the code. Making a recording using Hacker Typer is simple :

  • Open a file or a new VSCode window
  • Open the command palette, Ctrl + Shift , type PHackerTyper: Record Macro
  • Open a new file and start typing some code
  • Every keystroke you make will be recorded into an in-memory buffer
  • When you have finished open the command palette again type execute HackerTyper: Save Macro

After recording your macro, when you are ready to give your presentation, follow these steps:

  • Open a new file
  • Open the command palette, type in Execute HackerTyper: Play Macro
  • Select the name you selected
  • Now type anything on your keyboard and the code you recorded earlier will start typing šŸ’„

VS-Code Themes

When doing a presentation, the general rule of thumb is that a darker theme looks best on electronic displays, e.g. computer screens, and a lighter theme looks better on projectors. To make your code easy to read for your audience, it is recommended to use a light theme. If you need inspiration about which light theme to use in VS-Code for presentations, I recommend the Github theme . Downloaded over 2 million times, this is an extremely popular light theme to use that looks good and will make your code pop šŸ˜

Presentation Mode

When presenting code, you do not want your audience to become distracted by unneeded visual noise. You do not need solution explorer, the terminal, the sidebar, or any annoying notifications distracting your presentation. To ensure a smooth, distraction-free presentation, you could present your code using the in-built Zen mode to remove these distractions. To start zen mode, open the command palette ( Ctrl + Shift + P ) and search for 'zen'. Zen mode is OK, however, you can go one step further with an extension, [Presentation Mode](https://marketplace.visualstudio.com/items?itemName=jspolancor.presentationmode). The Presentation Mode extension will render code within VS-Code in a nice distraction-free view. After installing the extension, to start presentation mode, open the command palette ( Ctrl + Shift + P ) and search for 'presentation mode' option.

You now know about all the tools required to make a really cool and smooth presentation in VS-Code. Use these tools and remember practice makes perfect. Armed with this new knowledge, I'm sure you will nail your presentation šŸ’…. Happy Coding šŸ¤˜

10 Great Visual Studio Extensions For 2021

10 Great Visual Studio Extensions For 2021

10 Hidden Out The Box Visual Studio 2022 Features!

10 Hidden Out The Box Visual Studio 2022 Features!

BEST 10 Themes and UI Extensions Released For VS-Code in 2024

BEST 10 Themes and UI Extensions Released For VS-Code in 2024

Best ChatGPT Extension For Visual Studio Code in 2023?

Best ChatGPT Extension For Visual Studio Code in 2023?

Best VS-Code Extensions and Themes From 2022

Best VS-Code Extensions and Themes From 2022

Best VsCode API Client? Postman Vs Thunderclient Vs Rest Client

Best VsCode API Client? Postman Vs Thunderclient Vs Rest Client

Create An Army Of Virtual Pets Inside VSCode

Create An Army Of Virtual Pets Inside VSCode

Ditch Postman...  API Testing In Visual Studio Code

Ditch Postman... API Testing In Visual Studio Code

Easy Node Dependency Management In Vs-Code

Easy Node Dependency Management In Vs-Code

How to Give a Killer Presentation With VS-Code ?!?

How To Set-up Visual Studio Code To Do Inline React Debugging

Improve Copy And Paste In VS-Code In 5 Minutes

Improve Copy And Paste In VS-Code In 5 Minutes

Is Visual Studio Code Cloud Any Good? Codespace review

Is Visual Studio Code Cloud Any Good? Codespace review

Learn To Use The JavaScript Debugger In Visual Studio Code

Learn To Use The JavaScript Debugger In Visual Studio Code

The Best VS-Code AI Extensions Reviewed

The Best VS-Code AI Extensions Reviewed

Tips for working with JSON in Visual Studio Code

Tips for working with JSON in Visual Studio Code

Visual Studio Code Keyboard Shortcut Quiz 2021

Visual Studio Code Keyboard Shortcut Quiz 2021

We enable developers to createĀ  .css-b4ka5b{background-image:linear-gradient(140deg, #25B9DA 0%, #1F7FD8 100%);color:transparent;-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;} stunning presentations

Take your Code Presentations to the next level with snappify's powerful animation features.

Avatars

Join a community of 32 k+ developers spicing up their content

Trusted by industry leaders around the globe

Create next-level presentations

Say goodbye to boring presentations created with PowerPoint or Keynote. šŸ‘‹

snappify enables you to create stunning presentations, with first-class support for code snippets.

šŸ’” Share interactive slides so your viewers can easily copy code snippets and interact with links.

Elevate your Technical Content

Youā€™re a developer, looking to create visually engaging infographics for social media?

Use snappify to create stunning visuals of your technical concepts, that will engage your followers and take your social media presence to the next level.

Simplify your Education

Are you a teacher or course creator looking to help your students better understand technical concepts ?

snappify makes it easy to create educational content that lets your students retain information and grasp complex ideas.

Embed Interactive Infographics

snappify enables you to embed your visuals in a way that your viewers can easily copy code snippets or texts.

Itā€™s the perfect way to bring your blog to life or spice up your internal company documentation using rich infographics.

šŸŒˆ With support for popular platforms like Hashnode, Notion, and Medium, we ensure that your infographics look great, no matter where they're posted!

Spice up your articles

This is an example article using the embedding functionality of snappify. You can hover over the infographic below and copy the code snippet to give it a try in your own IDE.

User Stories

Get to know our users and learn how they leverage snappify!

Avatar of Rodrigo šŸšŸš€

Python educator

"Iā€™ve been presenting my talks with snappify for a while now. And each day it looks less and less likely that Iā€™ll go back to PowerPoint."

Avatar of Michael Bromley

Michael Bromley

Co-founder & CTO

"As a developer running a large open source community, without the time and skills for complex design software, snappify lets me get better results in a fraction of the time."

Avatar of Ndimofor Aretash

Ndimofor Aretash

Web Development Facilitator

"Nowadays, when I think of presenting (anything), I think first of snappify!"

Unleash your design potential with our powerful editor

.css-1prv3zp{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;margin-right:var(--chakra-space-3);} .css-13otjrl{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentcolor;} .css-1xh5ykb{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentcolor;vertical-align:middle;fill:none;width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentcolor;} add multiple code windows.

Sometimes you want to describe differences in code snippets and point out best practices by comparing them.

.css-xtks34{-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px);margin-right:var(--chakra-space-3);} .css-ms62x2{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentColor;vertical-align:middle;stroke:currentColor;fill:currentColor;width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentColor;} Annotate with Text and Arrows

Ever heard the myth of self explaining code? Pah! šŸ˜„

Place explanations (or just funny jokes) beside your snippets and style them to your needs with our powerful rich-text editor .

Additionally, you're able to add arrow elements to point at specific parts of your code.

Avatar of snappify

.css-1ttp4ht{-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px);} .css-177wddp{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentColor;margin-right:var(--chakra-space-3);} Your branding will be on point

If you're sharing your code snippets on social media, a little bit of branding doesn't hurt!

You can add your own avatar and specify a username for X, Github, Instagram or LinkedIn .

Add custom images

Upload custom images and arrange them per drag and drop. Push your creativity to new boundaries!

For example you can add an image of the programming language you're using or place a screenshot of the desired outcome of your code snippet.

Logo of CSS3

Highlight your code in different ways

With snappify you're able to change opacity, blur or gray-out parts of your code so the viewer can focus on what matters .

Of course it's also possible to mark specific lines as added or removed to emphasize a change in the code.

Manage your code snippets in one place

As you build an ever-growing library of code snippets, snappify helps you to keep an overview.

Because your code deserves a .css-c41erm{color:#447ED6;-webkit-animation:animation-fo40za 15s linear infinite;animation:animation-fo40za 15s linear infinite;}@-webkit-keyframes animation-fo40za{0%{color:#44D698;}25%{color:#447ED6;}50%{color:#D644A4;}75%{color:#447ED6;}100%{color:#44D698;}}@keyframes animation-fo40za{0%{color:#44D698;}25%{color:#447ED6;}50%{color:#D644A4;}75%{color:#447ED6;}100%{color:#44D698;}} stunning presentation

Professional

Ā Ā  $ 9 /month

$ 32 /month

1,000 views

Wanna stay up-to-date?

Sign up for our newsletter and we'll keep you updated with news about snappify

Our Mission

Greetings! šŸ‘‹

We're Anki and Dominik and with snappify we want to provide you the possibility to easily create technical presentations with smooth animations.

Doesn't matter if you create code explanations on social media, technical presentations for your company or smoothly animated videos - we hope you'll find snappify a valuable companion.

Illustration showing Anki and Dominik

Create your next presentation

snappify will help you to create stunning presentations and videos.

This video was created using snappify šŸ¤©

How to absolutely ace developer presentations

A live coding class at a Codeworks bootcamp

Whatever your personality type, you can learn to present.

You donā€™t have to be a naturally public or outgoing person to be good at presenting. Private, quiet people make brilliant presenters too. Whatever your personality, the Codeworks program puts a lot of emphasis on transferring these soft skills to our students. Each student presents several times during our Software Engineering and Web Development courses. After they graduate, they leave campus as not only better presenters, but better communicators for life.

On average, students will present two or three times during their course. Thatā€™s a lot. Through the students that graduate from our courses every 6 weeks, we play an important role in shaping the culture of the tech industry.

Clear presentations play a vital role in making that culture more accessible to wider audiences. The need for these skills is inescapable. Hear it from Codeworks graduate Anna Collins :

ā€˜ā€™I used presenting skills in teaching, as a student at Bootcamp, and now in my job, talking in front of others in daily standĀ ups.ā€™ā€™

Anna works at Barcelona green energy organization, Hola Luz . At work, her code needs to be as crystal clear in person as it is on screen. Thereā€™s no escaping it, presenting is essential for life after a coding bootcamp.

ā€œBeing able to write code is one thing, but being able to explain it to someone else is another.

ā€œLike Einstein said, if you canā€™t explain it to a six-year-old, you donā€™t understand it yourself.ā€

Firstly, why do coders need toĀ present?

Some developers might think presenting is something super senior and scary. Something for managers or ego-maniacs. But really, presentations are just one way of transmitting ideas and thoughts.

Luckily presenting is something you can improve on, with practice. Keeping it regular helps students overcome the angst so they can pitch to clients in the future. Matt Boardman, Madrid based elevator pitch consultant says:

ā€œYour expertise, product or idea is worth nothing unless your client or investor believes in it enough to pay for it.ā€

A live coding class at a Codeworks bootcamp

Presenting for a better life

Even if youā€™re not pitching for investment, weā€™re going to get radical. Better presenting will quite literally make your life better. With presentation skills, youā€™re more likely to give a better interview and get that a decent job.

With a job that pays well, youā€™re better able to buy a beer for your friend, without the stress of being broke. So the cycle continues. You present. You get paid. You have a beer. Life gets better.

But more importantly, the more you present, the more your confidence continues to soar. So you get happier at work. You start to speak up more in meetings. All of a sudden, youā€™re getting noticed. You present a little more. Maybe you get promoted. You buy more beers. Okay, weā€™ll stop there, youā€™ve got the idea.

Our top presenting tips

1. nail your slides.

  • Slides should support what you say, not the other way around. The less things to read on slidesā€Šā€”ā€Šthe more attention you get. Check out the 10/20/30 rule for more.
  • Start with the why .
  • Tell a story. If your audience can connect with your topic, you are winning! If youā€™re presenting your product, present the pain points that you are solving!
  • When talking about your tech stack, donā€™t just list the logos of frameworks and tools you used. Make your audience understand your choices and the flow between them. This shows the way you thought through the architecture of your project.
  • Know the content of your slides by heart. Never read whatā€™s on them, just glance on them as a reminder if needed.

2. Remember your body language

  • Donā€™t turn towards the slides. If you need to, point at them if they support what you want to say. Never show your back to the audience!
  • Pay attention to your hands: donā€™t put them in your pockets or cross them in front of your body.
  • If you are nervous, keep a pen in your hands! This way you will make your hands return to a natural position holding it, and you can use it to point on your slides as well.

3. Speak to your audience

  • Donā€™t read the slides! People can read them by themselves.
  • Test the microphone, be aware of the volume and your voice through the speakers.
  • Keep up the energy!
  • Use pitch and volume as strokes in a paint. Donā€™t be monotonic. Control the pace of your speaking and avoid cutting off the end of sentences.
  • Donā€™t feel the urge to fill every second. Use silence to create attention when you speak. Thereā€™s nothing like the loaded pause.

4. Show your product in the best light

  • Keep it simple. Itā€™s not necessary to show how users log in (unless itā€™s something special).
  • Connect the features to user stories while demoing.
  • Donā€™t highlight things that donā€™t work, are glitchy, or you didnā€™t have time to implement. Just focus on the parts that youā€™re showing.
  • If you use dummy data (which is completely fine when you are making MVPs), donā€™t tell it to your audience. They donā€™t need to know that, and itā€™s not important either.

Presenting at Codeworks

How to improve your presentation skills at work

  • Try to formulate the lessons you learned throughout your project, pitch, or demo so others can benefit. We use a saying at Codeworks: Stay hungry. And stay foolish. Ā We all make mistakes! Share your original assumptions, what mistakes you made, and how you can overcome them in the future.
  • Watch Ted talks, and take a note of presenters you respect. Ask yourself, what traits can you mirror?
  • Film yourself and ask for feedback. From colleagues, friends and even the dog. Always put yourself in your audiencesā€™ shoes.

Get started today  

Sign up for a course, or get in touch with us., our staff will be happy to help with any questions you have.

  • Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
  • Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
  • OverflowAI GenAI features for Teams
  • OverflowAPI Train & fine-tune LLMs
  • Labs The future of collective knowledge sharing
  • About the company Visit the blog

Collectivesā„¢ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Staging Ground badges

Earn badges by improving or asking questions in Staging Ground.

Good font for code presentations? [closed]

There's a couple of good questions regarding screen fonts for coding.

I'm putting together some Keynote presentations that will contain

code fragments

screen dumps of terminal windows

And the usual Courier display is looking a bit tired.

What are some good fonts for each of these? I'm especially interested in the terminal window dumps, to make sure they are legible. Or perhaps I can cut and paste the characters from the terminal window and apply some formatting to make it look screen-dumpish?

My main goal are

legible on screen and in printed outlines

the screen dump especially should be legible, but still identifiable as a screen dump

demonstrate I'm a person of visual taste and refinement, lol.

Robert Harvey's user avatar

8 Answers 8

I prefer Consolas .

  • 1 The link is broken –  Brad Johnson Commented Oct 24, 2017 at 21:56
  • Link to the above microsoft page: learn.microsoft.com/en-us/typography/font-list/consolas –  crash Commented Apr 15, 2020 at 9:30
  • 1 + for Consolas. Basically a Monaco with proper indentation. –  MrCheatak Commented Mar 26, 2022 at 11:51

If you are doing a presentation, and you don't care about anything lining up, Verdana is a good choice.

If you are going to distribute your presentation, use a font that you know is on everyone's machine, since using something else is going to cause the machine to fall back to one of the common fonts (like Arial or Times) anyway.

If you do care about things lining up, and are not distributing the presentation, consider Consolas:

It is highly legible, reminiscent of Verdana, and is monospaced. The color choices are, of course, a matter of taste.

Glorfindel's user avatar

I do a lot of such presentation and use Monaco for code and Chalkboard for text (within a template that, overall, has only small changes from the Blackboard one supplied with Keynote). Look at any of my presentations' PDFs (e.g. this one ) and you can decide whether you like the effect.

Alex Martelli's user avatar

  • 13 I really love Monaco for code. But Chalkboard? Ooof. –  molf Commented Jun 21, 2009 at 0:25
  • Thanks Alex, this looks quite nice. Interestingly my presentations will be about Python as well. –  Mark Harrison Commented Jun 21, 2009 at 0:30
  • @Mark, Great! As you may notice I sacrifice some readability (short var names, &c) in order to fit entire functions and classes on one readable slide (sometimes I explicitly apologize for that;-) -- in some other languages I wouldn't even try, but Python, Perl, Ruby, SQL, allow one such luxury;-). –  Alex Martelli Commented Jun 21, 2009 at 2:30
  • 2 @Alex, if a template is designed by Apple doesn't mean it's good. :-) Still, +1 for Monaco. –  molf Commented Jun 21, 2009 at 12:20
  • 3 eh, Chalkboard ~= Comic sans?! bancomicsans.com/home.html –  Carl Hörberg Commented Jul 14, 2009 at 10:19

I'm personally very fond of Inconsolata

baudtack's user avatar

  • I like that font too. It's easy to read and uncommon enough to look fresh. –  Antonis Lamnatos Commented Jul 14, 2009 at 13:58
  • The only thing I wish it had was a complete Unicode set. –  baudtack Commented Jul 14, 2009 at 14:19

Do you want people to focus on the content, and demonstrate that you're a person of taste and good sense? Stay with Courier. Don't innovate just because you can (otherwise, why not craft exquisite animations for every slide transition, with dancing letters...?).

Courier has several advantages:

  • Excellent readability in low resolutions.
  • Fixed width preserves indentation.
  • Serifed fonts link letters, allowing people to understand words and identifiers as a whole (gestalt perception). Nonserifed fonts should only be used for headlines.
  • Tried and true: people will immediately understand it's code.

If you want to dump point 4, at least choose an alternative that preserves points 1-3. Never allow form to trump function.

Pontus Gagge's user avatar

  • Don't agree, innovate otherwise we'd still be using sticks in the sand to write. –  user401247 Commented Sep 11, 2020 at 0:01
  • It's a common mistake to confuse "new" and "innovative". Argue the benefits of the alternatives: nothing is good just because it's new, nor just because it's old. –  Pontus Gagge Commented Sep 12, 2020 at 9:57
  • Have you tried sublime text, I found the font on that is Very readable, better that courier. The point is that if you donā€™t try new things youā€™ll never know if they are useful or not. Take a risk, try something new. –  user401247 Commented Sep 14, 2020 at 16:16
  • Lucida Console (good, but a little short)
  • Lucida Sans Typewriter (taller, smaller character set)
  • Andale Mono is very clear

But this has been answered here before .

Community's user avatar

  • It's a different question... the requirements for a good font for coding and a good font for presentations about coding are quite different. Unless you do extreme team coding, you don't need the coding font to be visible by hundreds of people projected on a screen in an auditorium. :-) –  Mark Harrison Commented Jul 14, 2009 at 22:58

I use DejaVu Sans Mono at Size 16.

UPDATE : I have switched to Envy Code R for coding and Anonymous Pro for terminal

Ibn Saeed's user avatar

I like Calibri.

Geo's user avatar

Not the answer you're looking for? Browse other questions tagged fonts or ask your own question .

  • The Overflow Blog
  • Rust is evolving from system-level language to UI and frontend development
  • Featured on Meta
  • Preventing unauthorized automated access to the network
  • Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
  • Proposed designs to update the homepage for logged-in users
  • Feedback Requested: How do you use the tagged questions page?

Hot Network Questions

  • Where did Kyle Reese get the hacksaw in The Terminator?
  • 2N7000 pull-up resistor value
  • Would it be possible for a planet to have only one lifeform?
  • A Simple, Theft-Proof Connecting Wall
  • Is it ethical to make money off your own lecture notes, lectures, or technical reports?
  • Should one be concerned about asbestos when sanding old paint from deck?
  • When Mr. Incredible saved a man from killing himself, is he really liable for damages?
  • Why do I need to clean flash between different Android versions on custom ROMs but not on OEM updates?
  • How can I insert this symbol resembling a zeta?
  • Big two sided arrow across matrix
  • Liber Abaci 1202: where is original manuscript scanned?
  • Is 125% DPI Scaling in reality actually 120% on Windows?
  • Why do I need a USB-C controller for PD?
  • What were the 3 charges of "attempting to influence a public servant" in the Tina Peters case for?
  • putting database mongod.conf under $HOME/web-server/. instead of /etc/
  • Why are Ukranian town and city names so (relatively) repetitive?
  • How can I convince my advisor to recruit me as a research assistant
  • Do we use "space" and "spacetime" interchangeably when it comes to curvature?
  • Why "geometria" and not "geometrica"?
  • Program for an employee database using python
  • Why does the Fisker Ocean have such a low top speed?
  • Configuring XYZ source
  • Unable to bond two 2.5 Gbps Realtek RTL8156 Ethernet adapters via LACP on Linux
  • Defining a sequence from a list or a table

what is code presentation

DEV Community

DEV Community

This is Learning profile image

Posted on May 10, 2023

How to Use Visual Studio Like a Pro When Presenting Your Code

Visual Studio is great to write code and create something amazing, but sometimes, you may want to use it for a different purpose: presenting your code to an audience. Whether you are giving a demo, a workshop, a lecture, or a webinar, you want to make sure that your audience can see and understand your code clearly. That's where Presentation Mode comes in.

Presentation Mode is a feature that lets you open an instance of Visual Studio that looks like a fresh install, without any customizations, extensions, or settings synchronization. This way, you can avoid any distractions or confusion that may arise from your personal preferences or environment. You can then adjust any settings that are relevant for your presentation, such as font sizes, themes, window layouts, and keyboard shortcuts. These settings will be preserved for the next time you use Presentation Mode.

How to Enter Presentation Mode

There are two ways of entering Presentation Mode in Visual Studio: with an extension or from command prompt without extensions.

With the extension

The easy way is to install the Tweaks extension and open any solution, project, or file in Visual Studio. Now you can right-click the Visual Studio icon in the Windows task bar and select Presentation Mode .

This will launch a new instance of Visual Studio with the default settings and no extensions (other than machine-wide ones). You can then open your solution or project and start presenting.

From Command Prompt

You can do the same thing yourself if you don't want to install the extension. Open the Developer Command Prompt or Developer PowerShell and execute the following line:

This will launch a new instance of Visual Studio with the root suffix PresentationMode. You can swap the word PresentationMode with whatever other word you want to create yet another isolated instance type. This can be helpful for scenarios where you need different settings based on the kind of project you are working on. For instance, you might prefer specific extensions and window layouts only for web development. This allows you to have that versatility.

How to Customize Presentation Mode

Once you have entered Presentation Mode, you can customize any settings to configure Visual Studio for your presentation style. Here are some common settings that you may want to change:

  • Font sizes : You can change the font sizes for the Text Editor, Environment, Tooltips, Statement Completion, and more from Tools > Options > Environment > Fonts and Colors . A good rule of thumb is to use at least 18 points for the Text Editor and 12 points for the Environment.
  • Theme : You can change the theme from Tools > Options > Environment > General . You may want to choose a theme that matches your presentation slides or has good contrast for your audience.
  • Window layout : You can change the window layout from Window > Reset Window Layout . You may want to minimize or close any tool windows that are not relevant for your presentation, such as Solution Explorer, Output, Error List, etc. You can also use Window > Auto Hide All to hide all tool windows until you hover over them.
  • Keyboard shortcuts : You can change the keyboard shortcuts from Tools > Options > Environment > Keyboard . You may want to use the default keyboard shortcuts or choose a scheme that matches your audience's expectations.

These settings will be saved for the next time you use Presentation Mode. If you want to reset them to the default values, you can use Tools > Import and Export Settings > Reset all settings Ā¹.

How to Exit Presentation Mode

To exit Presentation Mode, simply close the instance of Visual Studio that you used for presenting. This will not affect your normal instance of Visual Studio or any other instances with different root suffixes.

Presentation Mode is a handy feature that lets you use Visual Studio in a clean and distraction-free way for presenting your code to an audience. It allows you to customize any settings that are relevant for your presentation style, such as font sizes, theme, window layout, and keyboard shortcuts. These settings will be preserved for the next time you use Presentation Mode. To enter Presentation Mode, you can either use the Tweaks extension or the Developer Command Prompt or PowerShell. To exit Presentation Mode, simply close the instance of Visual Studio that you used for presenting. I hope this article has helped you learn how to use Visual Studio in Presentation Mode and how to make your code presentations more effective and engaging.

Top comments (0)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

gleamtech profile image

How to implement a file manager in ASP.NET Core 8.0

GleamTech - Aug 10

ilya-chumakov profile image

Designing HTTP API clients in .NET

Ilya - Aug 21

islomali99 profile image

C# da DataTime bilan ishlash

islomAli99 - Jul 31

bytehide profile image

Using Cast in C#: Tutorial

ByteHide - Aug 20

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

what is code presentation

Code Visualization: 4 Types of Diagrams and 5 Useful Tools

CodeSee product image

What Is Code Visualization?

Code visualization is the process of representing code in a graphical or pictorial format, rather than traditional lines of text. It entails creating visual representations of the structure, behavior, and evolution of software. Code visualization is about understanding the big picture of a codebase, seeing relationships and dependencies, and making sense of complex data structures.

Visualizing code can help bring clarity to complexity and make the abstract more tangible. When we visualize code, we are essentially translating the intricate language of computers into something more human and more comprehensible, both for developers and non-technical roles.

This is part of an extensive series of guides about [CI/CD] .

In this article: ā€

Why is it important to visualize code.

  • Using Diagrams for Code Visualization ā€ ā€¢ Architecture Diagrams ā€¢ Dependency Graphs ā€¢ UML Diagrams ā€¢ C4 Diagrams
  • Key Features and Capabilities of Code Visualization Tools ā€ ā€¢ Syntax Highlighting ā€¢ Dependency Mapping ā€¢ Interactive Debugging ā€¢ Heatmaps ā€¢ Collaborative Features ā€¢ Integration with IDEs and Repositories
  • 5 Notable Code Visualization Tools ā€ ā€¢ CodeSee ā€¢ Embold ā€¢ Gource ā€¢ SourceInsight ā€¢ CppDepend
  • Best Practices for Code Visualization ā€¢ Use Annotations ā€¢ Use Color Schemes Consistently ā€¢ Provide Code Snippets ā€¢ Real-Time Updates

Here are a few key benefits code visualization can provide for individual developers andĀ  development organizations:

  • Identify and fix bugs more easily: Visual tools can highlight areas of the code where potential errors may lie. For instance, they can spotlight sections of the code that are unusually complex, which could signal potential bugs. Also, by visually tracing execution paths and data flows, it can be easier to find and fix bugs.
  • Conceptualize large-scale projects: It's not uncommon to work on projects spanning thousands, if not millions, of lines of code. Code visualization can offer a bird's-eye view of the codebase, allowing developers to understand the overall structure and architecture of the software.
  • Visualize dependencies: Code visualization can help visualize dependencies between modules or libraries. This can be particularly useful when making changes to the code or debugging, as it allows developers to anticipate the potential impact of their changes and take preventative measures.
  • Onboard new software developers: Code visualization can help new developers understand the structure of the codebase, the relationships between different parts of the code, and where they need to focus their attention. This can significantly reduce the learning curve and allow new developers to become productive more quickly.

Using Diagrams for Code VisualizationĀ 

One of the most effective ways to visualize code is through the use of diagrams. Diagrams provide a visual representation of the code's architecture, dependencies, and relationships, making it easier to grasp the overall structure of the system. Let's explore some commonly used diagrams for code visualization:

1. Architecture Diagrams

Architecture diagrams provide an overview of the system's structure and how its components interact with each other. They help us understand the high-level organization of the codebase and the flow of data and control between different modules.Ā 

These diagrams typically include components such as modules, classes, interfaces, and their relationships. By visualizing the architecture, we can identify areas of improvement, ensure proper separation of concerns, and make informed decisions about code organization.

what is code presentation

2. Dependency Graphs

Dependency graphs are a powerful tool for visualizing the dependencies between different components of the codebase. They show how different modules or classes depend on each other, allowing us to identify potential issues such as circular dependencies or overly coupled code. By visualizing dependencies, we can make informed decisions about refactoring, identify areas of potential improvement, and ensure a modular and maintainable codebase.

3. UML Diagrams

Unified Modeling Language (UML) diagrams provide a standardized way of visualizing code. By using UML diagrams, we can communicate complex ideas and concepts in a standardized and easily understandable manner. Common types of UML diagrams include:

  • Class diagrams: Show the relationship between classes, their attributes, and methods.Ā 
  • Sequence diagrams: Illustrate the interaction between different objects over time. Activity diagrams: Help visualize the flow of control within a system.Ā 

what is code presentation

4. C4 Diagrams

C4 diagrams are a relatively recent addition to the code visualization toolkit, designed to provide a multi-level, hierarchical representation of software architecture. These diagrams are broken down into four levels:

  • Context Diagrams: Provide a bird's eye view of the system, showing how it interacts with users, external systems, and other software components.
  • Container Diagrams: Visualize the high-level technology stack and how major parts of the system communicate with each other.
  • Component Diagrams: This level illustrates the internal structure of individual containers, showing how various components within a container interact.
  • Code Diagrams: Represents the actual code structure, including classes and interfaces, along with their relationships.

what is code presentation

Source: Wikimedia

Learn more in our detailed guides to:

  • C4 model Tools

Key Features and Capabilities of Code Visualization Tools

While it is possible to create code visualizations manually, many developers use dedicated code visualization tools, or visualization features of their integrated development environment (IDE). These tools provide useful features that can make code visualizations easier to create and more effective.

Syntax Highlighting

Syntax highlighting displays text, especially source code, in different colors and fonts according to the category of terms. This feature can make reading code easier and less error-prone, as it enables developers to quickly identify syntactic elements like keywords, variables, or function calls.

Syntax highlighting can also aid in spotting syntax errors. For instance, if a variable is not highlighted in the expected color, it may indicate that it has not been correctly declared or initialized. This feature, while seemingly simple, can be a major time-saver in coding and debugging.

Dependency Mapping

Understanding dependencies is essential for effective software development. Dependency mapping visually represents these relationships, helping developers understand how different parts of the code interact with each other.

With dependency mapping, developers can see at a glance which parts of the code depend on a particular module or function. This can inform decisions about code changes and help anticipate potential ripple effects. It can also aid in identifying areas of the code that may be overly complex or tightly coupled, signaling areas for potential refactoring.

Interactive Debugging

Interactive debugging features enable developers to step through the code execution one line at a time, watch the state of variables, and visually trace the execution path. This can provide invaluable insights into how the code behaves at runtime and help identify and fix bugs more efficiently.

Interactive debugging can also serve as a powerful learning tool. By visually stepping through the code, developers can gain a deeper understanding of how different programming constructs work, how data structures evolve over time, and how algorithms unfold.

Heatmaps are a visually intuitive method of displaying complex data. In the context of code visualization, heatmaps can be used to show various aspects of your codebase, such as the frequency of code changes, code complexity, or the number of bugs in different parts of the code. By using colors to represent these different metrics, heatmaps allow you to quickly identify hotspots in your codebase that may need attention.

Collaborative Features

Many code visualization tools provide collaborative capabilities, allowing multiple developers to work on the same codebase simultaneously, annotating and discussing the code in real time. This can greatly enhance team collaboration and communication, making it easier to identify and resolve potential issues early in the development process.

Integration with IDEs and Repositories

Finally, many code visualization tools integrate seamlessly with popular integrated development environments (IDEs) and code repositories. This integration allows you to visualize your code directly within your preferred coding environment, making it easier to understand and navigate your codebase. As mentioned, popular IDEs also include built-in code visualization tools.

5 Notable Code Visualization ToolsĀ 

CodeSee is a dynamic code visualization tool that integrates seamlessly with development workflows and tools, including GitHub. It offers an array of features designed to provide deep insights into codebases, making it easier for developers and teams to understand, navigate, and manage their software projects effectively.

what is code presentation

Key features include:

  • Automatic codebase mapping: Automatically generates a map of the codebase, displaying connections between services, directories, and files.
  • Visual review process: Maps changes in pull requests for better understanding and context of code changes.
  • Interactive code tours: Features interactive, visual code tours to communicate ideas and code paths effectively.
  • Feature planning and ownership maps: Provides tools for visualizing feature architecture and designating code ownership within a team.
  • Side-by-side code comparison : Aids in comparing different versions of code and logically groups code for improved comprehension.
  • Dependency identification: Helps in identifying and understanding dependencies in the codebase.

Learn more about the CodeSee platform

what is code presentation

Embold is a developer tool that helps with code analysis, visualization, and refactoring. It helps developers understand their code's structure and quality, pinpoint potential problems, and refactor the code to enhance its maintainability and robustness.

what is code presentation

Main features include:

  • Code maps : You can create interactive displays of your source code, highlighting the relations and dependencies within your codebase.
  • UML diagrams : Automatically create UML (Unified Modeling Language) diagrams, such as class and sequence diagrams.
  • Graphs and charts : Create graphs that present various metrics like code complexity, test coverage, and code replication.
  • Code heatmaps : Create heat maps that indicate sections of the code with the most usage or potential quality issues.

Gource is an open source tool that generates visualizations of codebases based on version control data.Ā 

  • File tree visualization: Generates a tree-like visualization of the codebase, with each file represented as a node in the tree. The tree grows and changes to reflect the addition and modification of files.
  • Customization: Allows users to customize the visualization in various ways, such as by specifying which types of files or events to include or exclude.
  • Color coding: Uses different colors to represent different types of files or events, such as new files (green), modified files (yellow), and deleted files (red).
  • Branching and merging: Shows the relationship between different branches and when they are merged together.

SourceInsight

what is code presentation

Source Insight is a code editor and source code analysis tool developed by Source Dynamics. It is designed to help developers navigate, analyze, and understand large codebases.

what is code presentation

  • Syntax highlighting: Provides syntax highlighting for a variety of programming languages, which makes it easier to read and understand code.
  • Code browsing: Allows developers to easily navigate through a codebase by displaying a list of variables, functions, and classes and their locations in the code.
  • Cross-reference analysis: Allows developers to see how different parts of the codebase are interconnected and how they depend on each other.
  • Interactive code maps: Creates interactive graphical maps of code relationships, which can be used to understand the structure and dependencies within a codebase.

what is code presentation

CppDepend is a static code analysis tool specifically designed for C++ projects.

what is code presentation

  • Code metrics: These metrics are presented in an easy-to-understand visual format, allowing developers to quickly see the overall health of their codebase.
  • Dependency analysis: Allows developers to visualize the dependencies between different parts of their codebase.
  • Code map: Allows developers to visualize the structure of their codebase as a graph. This can be helpful for understanding the relationships between parts of the code.
  • Code review: Allows developers to review code changes and provide feedback before they are committed to the codebase.

Best Practices for Code Visualization

Now that we've discussed the key features and capabilities of code visualization tools, let's review some best practices that can help you get the most out of code visualization.

Use Annotations

Annotations are a powerful way to add context to your code visualizations. By annotating your code, you can provide additional information that may not be immediately apparent from the code itself. This can be particularly useful when working with complex or unfamiliar codebases.

Use Color Schemes Consistently

Consistency is key when it comes to code visualization. By using consistent color schemes, you can make your visualizations more intuitive and easier to understand. For example, you might use different shades of red to represent different levels of code complexity, or different colors to represent different types of code elements.

Provide Code Snippets

Code snippets are another useful tool for code visualization. By providing small, self-contained pieces of code, you can make your visualizations more concrete and easier to understand. This can be particularly useful when explaining complex or abstract concepts.

Real-Time Updates

Finally, real-time updates can make your code visualizations more dynamic and engaging. By using automated tools that can update visualizations in real time, you can provide a live view of your codebase, making it easier to spot trends, identify issues, and track the progress of your development efforts.

In conclusion, code visualization is a vital tool for modern software development, providing clear, visual representations of complex codebases. By employing diagrams, dependency graphs, UML diagrams, and C4 diagrams, developers can gain a comprehensive understanding of their software's architecture, dependencies, and workflows.Ā 

Automated code visualization tools like CodeSee offer a range of features such as automated code diagrams, code maps and dependency mapping to enhance the visualization process. These capabilities not only simplify the process of identifying and resolving coding issues but also facilitate more effective collaboration and onboarding of new team members.

Learn more about the CodeSee platform and get started with code visualization.

See Additional Guides on Key CI/CD Topics

Together with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of CI/CD .

Software Deployment

Authored by Codefresh

  • Software Deployment in 2023: Checklist, Strategies & Tips
  • What Is Blue/Green Deployment?
  • What Are Canary Deployments? Process and Visual Example
  • What Is Jenkins and How Does it Work? Intro and Tutorial
  • Continuous Integration with Jenkins: A Practical GuideĀ 
  • Jenkins X: How It Works and Creating Your First Project

Authored by Tigera

  • What Is DevSecOps and What Do You Need to Succeed?
  • 16 Amazing DevSecOps Tools to Shift Your Security Left

star

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. uis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Start your code visibility journey with CodeSee today.

Code Presentation Tips

Sometimes, I need to show some code in my slides. It can be an internal presentation for 3-5 developers, an online meetup, or a live event. And many times, I have found myself trying to recover the lost code style configuration or to recreate a color palette from the previous presentation.

I’ve decided to save all the templates and share them and some tips about code in slides with you. I hope it will help you to create code slides quicker and better.

Know Your Tools #

Logos

Get familiar with the tools for code formating and syntax highlight.

Popular choices for many languages are JetBrains IDEs or VS Code . There also some useful extensions for IDEs that can help you to take screenshots directly from the editor, such as Code screenshots or Polacode .

General-purpose text editors #

I use Sublime Text . It supports syntax highlight for many languages and has a lot of helpful extensions. Mine most often used commands for work with small pieces of code are Set syntax: %language_name% to use syntax highlight for a particular language in the current file and Reindent Lines to apply auto-indentation. Both commands can be accessed through the command menu by Ctrl/Command + Shift + P shortcut.

Online tools #

The best online tool I’ve seen so far is Carbon . It supports many languages, has many color themes, modern design, and it offers a lot of options for color theme configuration.

Those are my favorite tools to create a formatted and visually appealing piece of code, but there are other products in the market. What else do you use? Please, share your setup in comments!

Prepare Format & Highlight Presets #

No Highlight

Prepare and save the configuration for your editor.

It is possible to import and export code style configurations for IntelliJ Idea. For convenience, I store them in GitHub repository: Idea Config . You can apply this code style configuration in Settings ā†’ Editor ā†’ Code Style ā†’ Scheme ā†’ Import Scheme ā†’ IntelliJ IDEA code style XML and selecting your config file. The same menu allows you to export the current scheme. Create your config, save it in a repository, and use it when you need to have your code style in IDE.

Also, I store color schemes for Carbon . Carbon has many ready-to-use themes, but you can customize and share your configurations. You can find my configs and instructions on how to apply them here: Carbon Config .

Have Dark And Light Presets #

Dark and Light

Create presets for both light and dark environments.

I like the white code on a dark background, and usually, I use this theme for personal projects. But a couple of times, I had to redo a big presentation with a lot of code just because of the requirements from event organizers. It is convenient to have presets for two themes: dark and light. This way, you can quickly rewrite all your slides and adjust your presentation.

Choose Suitable Language #

Java

This problem may occur only when your presentation content is not about one particular technology. But if you are talking about a problem that can be solved and demonstrated in any programming language, then it is better to use a more suitable programming language.

For example, the Spark application can be written both in Java and Scala, but the Scala version almost always will be shorter and more expressive.

Keep It Short #

Long

Long code is acceptable only when you want to demonstrate how awful the long code looks.

Respect the time and effort of your audience. Leave only the code that shows the idea. Don’t include things that do not solve the problem of your slide, such as logging, error handling, imports, comments, etc. Also, don’t hesitate to replace a long or uninteresting block of code with comment or pseudocode.

Remember that simplicity is achieved not when there is nothing to add, but when there is nothing to take away.

Useful Links #

Carbon code image share tool ā€” https://carbon.now.sh/ .

Codestyle templates ā€” https://github.com/smyachenkov/code-slides-config .

what is code presentation

Presenting Code

published at 27.10.2016 16:42 by Jens Weller Save to Instapaper Pocket

At CppCon 2015 I decided to give a small lightning talk on how to present code in the coming year. This was a reflection on visiting many C++ related conferences and seeing many talks live and online:

What first got me thinking on this, was Scott Meyers Keynote at Meeting C++ 2014 , the 2nd part to be precise. It was Scotts last great public talk, and he decided to share some of his thoughts on how you should prepare your materials for the "modern age". He talked about much more then just doing slides for presentations, but I'd like to focus on this topic. A first reflection on this were the speaking guidelines I've put up for the Meeting C++ conference in 2015 (I'll update them, um, soon).

../../files/mcpp/slides/Presenting Code - Jens Weller - CppCon 2016_page_0003.jpg

Lets start with a main difference for giving talks in a user group and at a conference: your talk is likely to be recorded in the conference setting, and shared on youtube/vimeo or other platforms later. Maybe you do your own recording too. Means when preparing a talk, one has to think about this situation. It means that a large part of your audience will not be with in the room, it will be world wide on the internet. So your slide deck should reflect this, this often also benefits the audience that is in the room. This is the audience you are giving your talk to.

The audience in the room has a few less options, then those watching the recording. They can't pause, speed up or jump to the end of the talk. They're likely to ask questions, and often made the decision, to see this specific talk. Thats why its normal that some people leave at the beginning, don't get nervous by people leaving the room.

Also important to know, is the room it self. CppCon likes to do double projections, as some rooms are only useable like that. While in the past 4:3 was the format for slides, the trend today goes towards 16:9, ask your conference organizer/speaker contact about this (I usually share this in advance, for this year its 16:9 in the A & E Track, and B-C are 4:3).

Slide design & Code

../../files/mcpp/slides/Presenting Code - Jens Weller - CppCon 2016_page_0008.jpg

Make your slides easy to read, don't expect your audience to read a wall of text. Pick a certain theme and stay with it, have clear colors and good contrasts. But there is today lots of programs and formats to prepare a presentation in, often they already offer different slide designs. These can be a great start. Slide numbers will help a lot if you are expecting the questions at the end of the talk.

Code isn't really made to be presentable, often its not really well supported to get it into a slide deck can be quite hard. Power Point or Open Office (which I usually use), are not made with the goal to present code. There is js/html based presentation systems, which allow you add sections for highlighting. So this depends very much on which tool you use to create your slides, and how well you know your options within this tool. As I use Open Office, I have opted to choose no highlighting and and simply mark the important parts I'm going to talk about:

But, here lies an evil trap. Its not enough to copy paste your code into the slide, highlight the sections you want to talk about. Also nobody compiles slides, so its ok to remove visual noise, it will make it easier to focus on the important parts. Do you really need highlighting for your code? Traditional highlighting focuses on keywords and "lexer tokens" like strings. This can be great when giving an introduction into a programming language, but might distract when speaking about language features. I often prefer to have only highlighted the part I actually want to talk about, and even then I often choose normal/fat font as the highlighting instead of IDE like syntax coloring.

../../files/mcpp/slides/Presenting Code - Jens Weller - CppCon 2016_page_0006.jpg

Another great method for highlighting parts of your code can be "speech bubbles", which is a good method to comment your code on a slide:

../../files/mcpp/slides/Presenting Code - Jens Weller - CppCon 2016_page_0009.jpg

This picture also highlights something, that is often out of your control: the lights in the room it self. Maybe its even the sun it self, that makes your slides harder to read. Yet digital cameras are much more affected by this then the human eye, the slides in this talk were readable. But I have seen this being an issue every now and then, especially when the lights are turned on for the recording, as otherwise the speaker wouldn't be picked up by the cameras.

Also code can be easily a wall of text, which is great to show as an overview or the bigger picture. But when going over the details it might be a good idea to focus on them. An overview slide followed by one or more slides only showing details is a good way to help your audience to focus on your presentation. Especially if they watch the recording.

There is also the option of doing a live demo or just presenting code in an editor, which can work out very well. You will need to adjust some things like font size, and maybe highlighting.

Last, let me cover what to do, when you need to react on a live event on your slides. The classic "laser pointer situation", where some one asks a random question about a slide, be it code or not. The best way to handle this for the live and recorded audiences, is to be able to draw on your slide. This is a little known feature, and at least Open Office/Power Point can do it, and there is also programs which offer this outside of your presentation tool. For Open Office you will find it under Presentation -> Presentation options -> "use mouse as pen".

Laserpointers

Please don't use them, while they are great to give presentations to a smaller group, they fail in larger rooms, and don't expect to have always perfect lighting in your room. I do have trouble to see the dot every now and then, also its not recorded. So choosing to highlight what you are talking about with a laser pointer is failing for the part of the audience that is not in the room. Also it makes you turn towards your slides, and in case you don't wear a (headset) microphone, the audience might not hear as good what you are saying.

../../files/mcpp/slides/Presenting Code - Jens Weller - CppCon 2016_page_0013.jpg

And also, what do you do in a room with double projection? Do you bring two laser pointers? Do you first explain to the one side of the room, and then to the other? Also how do you handle this when you have 3 projections? Or more?

C++ and other programming languages are complex and often its a good habit to do this or that. But often, on a specific slide you want to make a point, focus on a certain detail. As said earlier, nobody compiles slides. So its useful to limit code on a slide on what your are trying to say. As long as the audience can understand the context.

I've seen the term "Slide++" used in this context quite often, and it explains perfectly, why a certain piece of code lacks usual things. Like the std:: other namespace qualifiers, or any feature not needed to present what you are talking about. This can be visual again in an overview slide. When details matter, it can be good only to show the part of the code that is important to this detail. Longer code lines mean smaller fonts and less readability to your audience. Yet it is a good idea to mention this a the beginning of your talk.

What should you talk about?

Um, this is actually outside the scope of this blog post, but...

When submitting a talk... There is of course the experts, which present the expert presentations. If you maintain a certain library or part of a standard library, thats low hanging fruit for you, while its probably for others not the first thing they'd pick. But you don't have to be an expert to start presenting on some topics. A great way to start is to give a presentation as an overview of a certain field. When you had to do research on which library to pick for your project, and you reviewed 3-4 libraries, you got your topic. Talk about your use case, present the different libraries, and help others to choose for their tasks the right library. Also, a great way to start speaking is preparing a lightning talk.

I am now for a few years in the program committees of C++Now, CppCon and Meeting C++. In the first two committees I'm just a normal member, at Meeting C++ I also have the role of doing the final selection. So, I am very well informed on what kind of talks get submitted to these conferences. I think there is a lack of talks giving an overview or introduction, and often a large set of talks on popular topics (Functional Programming, Concurrency/Parallelism, new Language Features,...). Also my impression is, it would be great to have more talks on cooking instead of talking about ingredients. Submitting more then one talk also means a higher chance of making it as a speaker to a conference, same goes for submitting your talk to more then one. Especially when you submit for a popular topic, it might be already covered by other speakers. And, conference organizers can only select on what gets submitted, there are areas which aren't or not very well covered by conferences in your domain. So, when you think "why is there no talk on topic x?", you might also already found a good topic and reason to give this talk!

I might write a follow up on general things in speaking later, but for now I'd like to stay focused on presenting code, so thats it for now :)

Join the Meeting C++ patreon community ! This and other posts on Meeting C++ are enabled by my supporters on patreon!

Copyright Meetingcpp GmbH 2024 Imprint Privacy Policy

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How can I embed programming source code in Powerpoint slide and keep code highlighting?

Is it possible to embed programming source code to Powerpoint slide, and keep code highlighting/coloring?

  • microsoft-powerpoint
  • source-code

anderas's user avatar

  • what application are you copying from? –  user1931 Commented Dec 21, 2009 at 4:26
  • I use textmate, e-texteditor and eclipse the most. –  Yousui Commented Dec 21, 2009 at 4:58
  • 2 Please copy your code to VC Code, and then paset to ppt –  Mohammad Fallah Commented Oct 12, 2023 at 17:13

11 Answers 11

After pasting, a small "Paste Options" icon appears below the pasted text.

Click this icon and choose "Keep Source Formatting" :

enter image description here

  • 3 I don't see such a Paste Options icon. I don't see a button to give me these options. I'm using PowerPoint:mac 2011. I think I have seen it in Windows versions, however. –  Asclepius Commented Jul 19, 2013 at 21:49
  • I tried different suggested methods and tools to copy from, but was actually missing that word/powerpoint was messing up the format by using "Destination Theme". Thanks! –  Tim Büthe Commented Jan 22, 2014 at 11:23

Use Notepad++ with add-on NppExport.

Select the source code

Use Copy RTF to clipboard of NppExport

Paste into empty PPT slide (do not select any textfiled)

Jawa's user avatar

  • 8 With version 6.9.2 or higher it's working without NppExport plugin. Just make right-click on the selected text -> Plugin commands -> Copy Text with Syntax Highlighting. –  Ivan Kochurkin Commented Aug 7, 2016 at 19:00
  • 2 Current version of Notepad++ already comes with this plugin :) –  fabriciorissetto Commented Nov 27, 2016 at 17:53
  • 1 Still working in NPP v8.2.1, Power Point 2016 –  iroiroys Commented Mar 16, 2022 at 6:08
  • Direct copy to PowerPoint did not worked well, I paste the code to Word and copy it from word to PowerPoint –  Alireza Fattahi Commented Aug 28, 2023 at 4:45

Pygments can format almost every format to rtf:

schlamar's user avatar

  • 3 An online translator is available at pygments.org/demo –  koppor Commented Nov 25, 2015 at 11:48
  • 6 Same idea, straight to the OS X clipboard pygmentize -f rtf code.py | pbcopy . –  Christian Long Commented Mar 14, 2016 at 14:28
  • Thanks for this. I got very favorable results with pygmentize -O style=paraiso-dark -f rtf -l aspx-cs Index.cshtml | pbcopy for syntax highlighting of a Razor view for use in a presentation. –  Asbjørn Ulsberg Commented Jun 20, 2019 at 20:42
  • Adding to what @ChristianLong suggested, but for Linux: pygmentize -f rtf code.py | xclip -sel clip . Note that you will probably have to install xclip. –  Matthew Cole Commented Nov 19, 2019 at 23:16

If the source code does not need to be copied and pasted out of the presentation, a quick and dirty solution could be to simply take screenshots of the source code.

Emory Bell's user avatar

  • 13 Image can be fuzzy when zoom in. –  Yousui Commented Dec 21, 2009 at 4:58
  • Use the magnifier and then take a screenshot of that. –  wbeard52 Commented May 17, 2015 at 0:57
  • 4 Doing so can increase the size of the presentation file significantly. –  Rufflewind Commented Nov 10, 2016 at 17:39
  • 1 This also has the drawback that once screenshot, it is no longer possible to resize the column width. This becomes a problem if you try to fit a 80 column printout into a 2x1 horizontal slide layout, a 132 column source into a 1x2 vertical layout, for example. The pygmentize answer above doesn't suffer from this. –  Matthew Cole Commented Nov 19, 2019 at 22:55
  • Click on Insert ā†’ Object ā†’ OpenDocument Text
  • Paste on opened panel
  • Click outside.

Note: Copying from Notepad++ will preserve colors and styling.

random's user avatar

  • 1 Doesn't work for power point 2010. I copied text from Notepad++ to Power point presentation but it looses colors and styling. –  ART Commented Jan 4, 2016 at 5:11
  • 2 If I use NPPExport pluging and use "copy RTF to clipboard" and then paste it works. –  ART Commented Jan 4, 2016 at 5:13

Copy the code and first paste that code into Microsoft word

enter image description here

Then do the formatting if necessary and then copy from word and paste back to powerpoint by right clicking and choosing use destination theme

enter image description here

  • Either way,ā€Š what does ā€œThen do the formatting if necessaryā€ mean? –  Scott - Слава Україні Commented Apr 26, 2017 at 19:10
  • It means if you want to do some changes of your own like aligning or indentation of code –  selftaught91 Commented Apr 26, 2017 at 19:17
  • This was the only way that I could copy and paste code from IntelliJ (a special program used for writing code) –  robert Commented Nov 14, 2019 at 4:15

Here's another approach:

  • https://emn178.github.io/online-tools/syntax_highlight.html
  • https://pinetools.com/syntax-highlighter
  • Paste the code to highlight into the web site.
  • Copy the highlighted version.
  • Create a new Word document.
  • Paste the code into Word (note the background colours may be lost).
  • Copy the code from Word.
  • Create a new text area in PowerPoint.
  • Click the Home menu option.
  • Open Paste on the ribbon.
  • Select Keep source formatting .
  • Optionally, change the text area background colour to taste.

Adjust the font using Inconsolata or other monospace font.

Dave Jarvis's user avatar

Online syntax highlighter like TextMate seems good as well, http://markup.su/highlighter/

But after pasting into PowerPoint presentation new lines and line spacing is lost, so we can take a screen shot of the preview and paste it in our PowerPoint presentation

Mohammed Abdul Mateen's user avatar

  • Pasting into ppt does not quite work here on Windows 10: The new lines are not pasted. –  koppor Commented Nov 24, 2015 at 15:22

Using Notepad++ and Npp Export works great, but your text will end up with a white background.

To remove it, paste first the text in word with the "preserve source formatting" option. Then, select the text and in Home > Font, remove the background with the Text Highlight Color option.

Then, copy again the text from word, and paste it in powerpoint with the "preserve source formatting" option.

John's user avatar

Pasting from Eclipse should retain formatting if the app supports it. I know Word does... not sure about PPT.

Chris Nava's user avatar

  • 1 Works from Eclipse Juno to Word 2010, but not to Powerpoint 2010 - it loses the colours and converts some of them to bold text –  DNA Commented Sep 4, 2013 at 17:21

I've had no success pasting into Powerpoint 2010 on Windows.

However, pasting from Eclipse into Word 2010 works.

You can then save this formatted text as an RTF file, then embed the RTF into a Powerpoint 2010 slide using Insert Object (and optionally select 'link' so you can edit and update the text in Word).

DNA's user avatar

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged microsoft-powerpoint source-code ..

  • The Overflow Blog
  • Rust is evolving from system-level language to UI and frontend development
  • Featured on Meta
  • Preventing unauthorized automated access to the network
  • Upcoming initiatives on Stack Overflow and across the Stack Exchange network...

Hot Network Questions

  • Why does the Schwarzschild solution describe a black hole?
  • Numerical choice and reverse mathematics
  • What would this animal's meat taste like?
  • In "Dead Tired," whom is the character next to Queen Elizabeth's lookalike supposed to impersonate?
  • Are there any special actions that I should execute as a reviewer of a sloppy manuscript?
  • Is it practical in real life to drill magnetic screws into someone's skull in order to wear a wig?
  • alias fake hostname via /etc/hosts
  • My head seems to have fallen off
  • How did “way to go” come to mean “well done”?
  • Is it ethical to make money off your own lecture notes, lectures, or technical reports?
  • Auto Update Stats - Bad Query Plan
  • How are demons relevant to the Grothendieck-Riemann-Roch theorem?
  • Why do I need a USB-C controller for PD?
  • Are slurs necessary for a piano tremolo, and if so what does their presence indicate?
  • Do we use "space" and "spacetime" interchangeably when it comes to curvature?
  • Why are Ukranian town and city names so (relatively) repetitive?
  • How to enable testnet4 on bitcoin-core 28.0?
  • Who wins this chocolate bar breaking game?
  • When did Batman first break his "never hit a lady" rule in the comics?
  • Best way to run cat 6 flat network cable under house
  • Is it always possible to do a Hohmann transfer orbit between two planets in a star system?
  • Meaning of the joke A: "how much coke do you do" B: "Yes."
  • Liber Abaci 1202: where is original manuscript scanned?
  • Big two sided arrow across matrix

what is code presentation

IMAGES

  1. How to Code Presentation Template

    what is code presentation

  2. Code Presentation Tips

    what is code presentation

  3. Coding Presentations

    what is code presentation

  4. How to Code Presentation Template

    what is code presentation

  5. How to Code Presentation Template

    what is code presentation

  6. Field Codes In Powerpoint at Thomas Gust blog

    what is code presentation

VIDEO

  1. Backrooms has a code... PRESENTATION EXPERIENCE

  2. 4

  3. T2202 tax code presentation

  4. Team Won Consulting Color Code Presentation

  5. code presentation

  6. 3 Codes in The Presentation Experience

COMMENTS

  1. How to Make Beautiful Code Presentations - YouTube

    This video answers the most common question I get on my channel: how do I make my code animations / presentations?

  2. How to Give a Killer Presentation With VS-Code - Jon D Jones

    In this tutorial, you will learn how to optimally present code from within Visual Studio code. As a developer, being asked to present your code seems to be a very common ask in 2021.

  3. snappify - Create stunning Code Presentations and Videos

    snappify enables you to create stunning presentations, with first-class support for code snippets. Learn more šŸ’” Share interactive slides so your viewers can easily copy code snippets and interact with links.

  4. How to absolutely ace developer presentations - codeworks

    How to improve your presentation skills at work. Try to formulate the lessons you learned throughout your project, pitch, or demo so others can benefit. We use a saying at Codeworks: Stay hungry. And stay foolish. We all make mistakes! Share your original assumptions, what mistakes you made, and how you can overcome them in the future.

  5. Good font for code presentations? - Stack Overflow

    It's a different question... the requirements for a good font for coding and a good font for presentations about coding are quite different. Unless you do extreme team coding, you don't need the coding font to be visible by hundreds of people projected on a screen in an auditorium.

  6. How to Use Visual Studio Like a Pro When Presenting Your Code

    Presentation Mode is a handy feature that lets you use Visual Studio in a clean and distraction-free way for presenting your code to an audience. It allows you to customize any settings that are relevant for your presentation style, such as font sizes, theme, window layout, and keyboard shortcuts.

  7. Code Visualization: 4 Types of Diagrams and 5 Useful Tools

    What Is Code Visualization? Code visualization is the process of representing code in a graphical or pictorial format, rather than traditional lines of text. It entails creating visual representations of the structure, behavior, and evolution of software.

  8. Code Presentation Tips | Stanislav Myachenkov

    Code Presentation Tips | Stanislav Myachenkov. August 11, 2020 · 4 min. Sometimes, I need to show some code in my slides. It can be an internal presentation for 3-5 developers, an online meetup, or a live event.

  9. Presenting Code - Meetingcpp

    An overview slide followed by one or more slides only showing details is a good way to help your audience to focus on your presentation. Especially if they watch the recording. There is also the option of doing a live demo or just presenting code in an editor, which can work out very well.

  10. How can I embed programming source code in Powerpoint slide ...

    Is it possible to embed programming source code to Powerpoint slide, and keep code highlighting/coloring?