code for presentations

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.

Join a community of 30 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!

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."

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."

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.

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

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?

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.

Create your next presentation

snappify will help you to create stunning presentations and videos.

This video was created using snappify 🤩

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

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" :

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)

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:

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.

12 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.

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

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

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.

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

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.

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

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).

You must log in to answer this question.

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

Featured on Meta
Upcoming sign-up experiments related to tags

Hot Network Questions

Weird behavior by car insurance - is this legit?
In By His Bootstraps (Heinlein) why is Hitler's name Schickelgruber?
How will the ISS be decommissioned?
What is the meaning of the angle bracket syntax in `apt depends`?
Tubeless tape width?
Montreal Airport US arrival to International Departure
Synthesis of racemic nicotine
Would a spaceport on Ceres make sense?
Sets of algebraic integers whose differences are units
Reconstructing Euro results
Power of multiplication of powers
"All due respect to jazz." - Does this mean the speaker likes it or dislikes it?
Visit USA via land border for French citizen
Cleaning chain a few links at a time
Were there engineers in blimp nacelles, and why were they there?
What is the relationship between gravitation, centripetal and centrifugal force on the Earth?
How do you say "living being" in Classical Latin?
Idiom for a situation where a problem has two simultaneous but unrelated causes?
How do I pour *just* the right amount of plaster into these molds?
Is it legal to discriminate on marital status for car insurance/pensions etc.?
Simple Container Class
How to Draw Gabriel's Horn
Why can Ethernet NICs bridge to VirtualBox and most Wi-Fi NICs don't?
Do countries at war always treat each other's diplomats as personae non gratae?

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

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 #

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 #

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 #

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 #

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

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Awesome presentations deserve beautiful code

Ever seen ugly source code on a slide?

Welcome to reality. Every now and then we all need to put code samples onto PowerPoint or Keynote presentations.

But wait - presentation programs are made for text , not for code : They loose all syntax highlighting when you paste your valuable code into their limited textboxes… Look at this horrible example:

I like to introduce carbon - a free website that elegantly solves this problem. On their website the creators describe their goal short and concise:

“Carbon lets you create and share beautiful images of your source code”.

You see a possible result below:

What a difference!

Nice’n Easy

Carbon is incredbly easy to use: Simply paste your code in the textbox or drag a source file.

Carbon has a number of interesting configuration options available:

Predefines themes

Several themes are available, all except the Darcula-Pro themes are free:

If you prefer a lighter theme, you are covered too:

In case you need to, you may even configure your own custom theme. It’s a lot of work, and for me the standard themes are way good enough.

Additional Layout Options

You can set padding, border color, shadow, width, (artificial) window controls and a few more options:

Export to png and svg

As expected, carbon can export the image of your source as png or svg:

Alternatives

All right, you may also copy/paste source code as RTF (and hope that your presentation tool really preserves formatting). You could either paste your code to Microsoft-Word (crossing fingers again for preserved formatting), and export it to PowerPoint from Word. Might work, but is less fun. And it’s no good for our atmosphere :-)

But: Accessibility Issues

When you convert source code to images, you have to (manually) take care of accessibility . Images like the ones generated by carbon.sh are not suitable for screen readers. If you want to adhere to accessibility good practices, you should therefore include the source code shown in the alt-tag of the generated images.

You never again need to include source code as plain and ugly text in any of your presentations!

One final remark: The name “carbon” was chosen by the authors because they want to reduce CO2 in the atmosphere, read the small print ( …offsets ) on their website.

carbon.now.sh
The creators, carbon_app
Their Github repository (carbon-app)

Kudos to Joachim Praetorius for improving my English and Lars Hupel for pointing out the accessibility issues!

what are you looking for?

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

Published on sun 17 april, 2022.

Architecture
Visual Studio Code

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 Hidden Out The Box Visual Studio 2022 Features!

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

Best ChatGPT Extension For Visual Studio Code in 2023?

Best VS-Code Extensions and Themes From 2022

Best VsCode API Client? Postman Vs Thunderclient Vs Rest Client

Create An Army Of Virtual Pets Inside VSCode

Ditch Postman... API Testing In Visual Studio 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

Is Visual Studio Code Cloud Any Good? Codespace review

Learn To Use The JavaScript Debugger In Visual Studio Code

The Best VS-Code AI Extensions Reviewed

Tips for working with JSON in Visual Studio Code

Visual Studio Code Keyboard Shortcut Quiz 2021

PowerPoint: Inserting Source Code with Syntax Highlighting

Jun 10, 2021 08:46 · 139 words · 1 minute read.

When giving talks, I often want to show some small code samples on my slides. Of course, it should look nice and have syntax highlighting. This is not an easy feat. There are several options for showing code on your slides:

You can use a presentation software that can manage source code highlighting out of the box, e.g. Reveal.js or the LaTeX beamer package
You can convert the code to an image via Carbon or Codeimg .

But, if you, like me, want to continue using PowerPoint (the whole company is using PowerPoint & we often combine slides from different slide decks), there is another very easy option available: Just put your code into VS Code , enable syntax highlighting, and then copy-paste the code into PowerPoint. The formatting - including syntax highlighting - will stay intact magically. Just awesome 😍

Simple Engineering

How to add good looking code snippets in presentations, documentations and blog posts.

It is quite a challenge to add good looking code snippets documentations, presentations or books.

When adding code in documentation, the classic move is to take a screenshot, use tool X to add extra pictogram to the code, and upload a picture and hope for the best that there is no bug in our example. To solve the versioning issue, some copy/paste from gist to content, just to avoid penalty that comes with using iframes . Both approaches are not sustainable in terms of workflow.

This article will explore scalable, sane ways to share good looking code snippets, with possibility to edit shared code, without fear or hustle of keeping track of all places the code has been shared.

In this article you will learn about:

Tools available to make good code snippets to add in various presentation media
Techniques to leverage tools without breaking the piggy bank

Even though this blogpost was designed to offer complementary materials to those who bought my Testing nodejs Applications book , the content can help any software developer to tuneup working environment. You use this link to buy the book .

Using screenshots. Screenshots are the most obvious and ubiquitous form of code snippets sharing mechanism. The image produced by the snippets can easily be embedded in any form of medium, be a social media post, blog post, presentation or even a book. However, when time comes to add an addition to the code, or correct an error, then the scalability/sustainability of this practice manifest. It is not effective just to snap another print-screen and re-share everywhere else the print screen has been shared. Moreover, the code hardly looks good inside the editor. Developers editors are most of the time optimized for work, and not for presentations.

Using carbon. Carbon is really powerful tool. It made it possible to add, edit and share quite stunning representation of code, as pictures/svg. It allows to format code at taste of the author, and makes the code easily shareable as svg or image elements. Since the platform that generate the code is hosted on somebody else's servers, it becomes quite a challenge to keep track of all code change in every shared snippet.

Using gist. Gist allows to host/track, edit and share code snippets with the world. To share the code within blogposts and heavy presentations comes with a downside: gist uses inline iframe , which sometimes do not look good on mobile, but also are really a pain in ass performance-wise.

There are solutions for sharing the code snippets around the internet. Some of those resources do not allow their users to such as using gist(this looks good)

Quite often code snippets are posted on this and other dev platforms. Graphical annotations(drawings and text) on top of snippets, make code easy to digest, therefore conveying more knowledge to readers.

Codepen.io gives a way to take and export a screenshot . There is also highlighter libraries like highlight.js , in additions to plugins that allow highlighting in presentation(text processors).

From previous examples, and statements, one may ask “How do people add graphical annotations on code snippets?” . In case of an error in code sample, we tend to go back and fix the example. This forces authors to go back and edit graphical annotations, before updating the documentation with the right snippets. Is it possible to reduce time it takes to make such modifications.

Non exhaustive list of some products:

Explain and send screenshots ~ paying
Marker ~ paying
Awesome Screenshot
SnagIt ~ paying
Nimbus Capture ~ paying
Carbon free and open source

Non exhaustive list of some presentation software, other than Keynote, Google Slides and Microsoft PowerPoint(If this is still a thing)

I read most of these links without luck.

Advanced Data Vizualization ~ using prismjs /[d3js]
Creating beautiful presentations using Highlight
Adding dynamic code snippets to presentations
Approaches to presenting code demos to a Developer audience
How To Format A Block of Code Within a Presentation?
How do I embed source code or HTML in Open Office Org Presentations without using screenshots?
Code highlighting for Keynote presentations
Code Syntax Highlighting with Angular and PrismJS
How can I get code syntax highlighting in Google Docs?
What's the easiest way to insert code snippets into a Keynote presentation?
Tools to annotate screenshots for documentation purposes
Making your code beautiful
10 Best Code Presentation Tools for Developer

Got any suggestions?

We want to hear from you! Send us a message and help improve Slidesgo

education technology

239 templates

computer technology

306 templates

ai technology

186 templates

cyber security

10 templates

meet the teacher

30 templates

first day of school

70 templates

Programming Presentation templates

If you're the type of person who loves to solve puzzles and think analytically, then programming might just be the perfect hobby for you programming gives you the opportunity to create, explore and work with logic to make all sorts of neat projects, from apps and websites to video games and machinery. enter this wonderful world by checking out our google slides themes & powerpoint templates about programming..

It seems that you like this template!

Hackathon minitheme.

Download the Hackathon Minitheme presentation for PowerPoint or Google Slides and start impressing your audience with a creative and original design. Slidesgo templates like this one here offer the possibility to convey a concept, idea or topic in a clear, concise and visual way, by using different graphic resources. You...

Code Hacker Lesson for Middle School presentation template

Premium template

Unlock this template and gain unlimited access

Code Hacker Lesson for Middle School

Don't let the name mislead you! If you're a middle school teacher and your mission is to educate your students in the use of computers, this template can help you make your lesson more interesting! The visual content revolves around programming (yes, and hackers), so you might want to talk...

Programming Lesson

If you teach programming languages and related issues, download and personalize this template to prepare your lesson. The fonts look computer-like, and it’s very creative. Insert some info about the features of the topic, assignments and support them with visual aids, such as bar graphs.

Programming Language Workshop for Beginners

Go from “Hello World!” to a master in programming with this creative template that looks like code line. The amazing design works perfect for a programming workshop because it includes editable resources and a layout that makes understanding code lines a very easy and visual experience. In addition, the color...

All About Programming in Java

Download the All About Programming in Java presentation for PowerPoint or Google Slides. High school students are approaching adulthood, and therefore, this template’s design reflects the mature nature of their education. Customize the well-defined sections, integrate multimedia and interactive elements and allow space for research or group projects—the possibilities of...

Computer Science & Mathematics Major For College: Computer Science & Programming

Show future students the wonders of computer science and what they can achieve if they join a career in this incredible degree. With these slides you can speak about both technical and simple concepts and they will all be quickly understood! Editing them is as easy as printing Hello world!...

Introduction to Java Programming Language for Middle School

Are you ready to take coding to the next level? Java programming may just be the answer you've been searching for. As a versatile language used in engineering and various platforms such as Android, Java is a great language to learn in middle school. With the help of this Google...

Introduction to Java Programming for High School

Teaching programming to High School students is undoubtedly a great way to give them useful and practical skills for life! And to help you out with this task, Slidesgo has created this template for an introduction to Java programming for you. Not only is it extremely attractive with its neon...

Silicon Valley Programmer Portfolio

Download the "Silicon Valley Programmer Portfolio" presentation for PowerPoint or Google Slides. When a potential client or employer flips through the pages of your portfolio, they're not just looking at your work; they're trying to get a sense of who you are as a person. That's why it's crucial to...

Bachelor in Robotics Engineering

Download the Bachelor in Robotics Engineering presentation for PowerPoint or Google Slides. As university curricula increasingly incorporate digital tools and platforms, this template has been designed to integrate with presentation software, online learning management systems, or referencing software, enhancing the overall efficiency and effectiveness of student work. Edit this Google...

Coding Essentials for Beginners

Download the Coding Essentials for Beginners presentation for PowerPoint or Google Slides. The education sector constantly demands dynamic and effective ways to present information. This template is created with that very purpose in mind. Offering the best resources, it allows educators or students to efficiently manage their presentations and engage...

Silicon Valley Programmer Slideshow

Download the Silicon Valley Programmer Slideshow presentation for PowerPoint or Google Slides. The world of business encompasses a lot of things! From reports to customer profiles, from brainstorming sessions to sales—there's always something to do or something to analyze. This customizable design, available for Google Slides and PowerPoint, is what...

Java Programming Workshop

Programming... it's hard, it must be said! It won't be after you use this presentation! If you are an expert in Java and programming, share your knowledge in the form of a workshop. This template is designed for you to include everything you know about Java and show it to...

Colombian Code and Programming Learning Center

Do you know how to program? All the secrets of codes and programming can be mastered if well understood. Maybe a teaching center can help with that! A little bird has told us that you own a Code and Programming Learning Center and you need to present it to new...

Brackets Lesson for Coding and Programming

Learning the basics of coding and programming just got a lot easier with this engaging template about the importance of brackets. Let's go through the basics together, using illustrations and visuals in colorful tones to make the learning process even more fun! From understanding what brackets mean to knowing where...

Cibersecurity Programme Project Proposal

Download the Cibersecurity Programme Project Proposal presentation for PowerPoint or Google Slides. A well-crafted proposal can be the key factor in determining the success of your project. It's an opportunity to showcase your ideas, objectives, and plans in a clear and concise manner, and to convince others to invest their...

New Operating System Design Pitch Deck

Windows, Android, macOS... the list of operating systems is quite long, and without them, we wouldn't have be using electronic devices today. Yeah, no computers, no smartphones! As technology continues to evolve at a rapid pace, there is a growing demand for new and innovative operating systems that can keep...

Page 1 of 5

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.”

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.

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

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.

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.

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.

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.

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

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.

Don't agree, innovate otherwise we'd still be using sticks in the sand to write. – rhody 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. – rhody 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 .

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

I like Calibri.

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

Featured on Meta
Upcoming sign-up experiments related to tags
The return of Staging Ground to Stack Overflow
Should we burninate the [lib] tag?
Policy: Generative AI (e.g., ChatGPT) is banned
What makes a homepage useful for logged-in users

Hot Network Questions

Algorithm to evaluate "connectedness" of a binary matrix
Why was the animal "Wolf" used in the title "The Wolf of Wall Street (2013)"?
Are both vocal cord and vocal chord correct?
Why was William Tyndale executed but nothing happened to Miles Coverdale?
Did James Madison say or write that the 10 Commandments are critical to the US nation?
Check for key in dictionary without magic value comparison
What could explain that small planes near an airport are perceived as harassing homeowners?
What is the translation of misgendering in French?
Trying to determine what this item is
How are "pursed" and "rounded" synonymous?
Montreal Airport US arrival to International Departure
Stiff differential equation
Do IDE data lines need pull-up resistors?
Do countries at war always treat each other's diplomats as personae non gratae?
George Martin story about a war in which he mentions airplanes called Alfies (meaning Alphas, I think)
Were there engineers in blimp nacelles, and why were they there?
Collaborators write their departments for my (undergraduate) affiliation
Idiom for a situation where a problem has two simultaneous but unrelated causes?
Which numbers are sums of finite numbers of reciprocal squares?
How to model an optimization problem with mutual exclusivity of two variables, without introducing integer variables?
Drawing waves using tikz in latex
DSP Puzzle: Advanced Signal Forensics
Why does Balarama drink wine?
Is there a smooth function, which is in L^1, but not in L^2?

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

Create Beautiful PowerPoint Slides with ChatGPT and VBA

Here’s a quick tip to boost your productivity by letting ChatGPT and VBA do the heavy lifting when creating PowerPoint slide decks.

If you don’t know what VBA is, no worries. It stands for Visual Basic for Applications and is integrated into all Microsoft Office applications, including PowerPoint. And no, you don’t have to be a programmer to make this work for you. Your existing copy/paste skills will do just fine…

Let me show you.

Here are the specific steps to take to boost your productivity when creating PowerPoint slide decks:

Visit ChatGPT and prompt it to write an outline for a PowerPoint presentation. Let’s pretend we want a pitch deck with maximum seven slides to present SmartPet Buddy, a fictitious robotic companion for pets.

The ChatGPT prompt could look like this:

You are an entrepreneur who invented SmartPet Buddy: A robotic companion for pets that offers interactive play, exercise, and monitoring, keeping pets entertained and active even when their owners are away. Real fun for your the whole family...including your best friends.

Write the outline for a slide deck to pitch this amazing product to prospective customers. Tell them about how exciting their lives will be with SmartPet Buddy in the house. Focus on the benefits more so than the features.

Tell your audience what the product does for them and what it means to them in their life rather than what it is by listing feature after feature.

Use no more than 7 slides in this deck.

ChatGPT will then produce the outline for this slide deck, just like we asked it to do.

If you like what ChatGPT presents to you, cool. Otherwise either hit the “Regenerate Response” button — or suggest what kind of modifications you want.

Once you are satisfied with the outline for your slide deck, it’s time to bring VBA into play. We are going to prompt ChatGPT to generate the required VBA code for PowerPoint from the outline:

Now write the VBA code to create the PowerPoint slides for this pitch. Add content that is humorous and whimsical to reflect just how fun the product is.

As always, ChatGPT, our skilled and willing digital assistant, will oblige and create a block of code for us. We can then copy this code and hop over to PowerPoint.

Copy the VBA code ChatGPT generated so you can paste it into PowerPoint's Visual Basic Editor.

In PowerPoint, launch the Visual Basic Editor by pressing Alt-F11 or selecting Visual Basic Editor from the Tools/Macro menu.

To get your VBA code into PowerPoint, launch the Visual Basic Editor by pressing Alt-F11 (or select it from the Tools -> Macro menu).

Then, right click on the Project Panel and select Insert -> Module.

Insert a module by right-clicking on the Project panel in the Visual Basic Editor.

A new window will open. Paste the code you copied from ChatGPT into this window and then run the code by clicking on the ► icon.

Once you inserted the code (the real magic to make PowerPoint and VBA do the heavy lifting), run the code by clicking on the 'play' icon or choose it from the Run menu.

And that’s it!

This piece of code has now created a new PowerPoint presentation with 7 slides with minimal text on each.

Now all that’s left is to make it pretty by using PowerPoint’s Designer feature:

Here is where the real magic happens to make your slides pretty by using PowerPoint and VBA. Open the Designer to see a list of suggested designs based on your content.

The Designer is powered by AI as well and will read your slides and suggest a appropriate designs and images.

All you need to do is to select one of the designs you like. Then, fine-tune each slide to make sure your message will resonate with your audience — and voila… You have created a beautiful slide deck in no time.

In case you’re having trouble with the code, here is the snippet that worked for me:

Get instant access to my newsletter where I share my best presentation tips.

100% Privacy. No Spam.

Virtual Card Magic for Online Presentations

Virtual Card Magic is a ridiculously cool card trick designed specifically for online presentations and meetings.

Preparation and coaching were key for Haley McClain Hill's Shark Tank success

10 Key Takeaways from a Shark Tank Success Story

Learn from Haley McClain Hill’s Shark Tank success story what it takes to prepare for Shark Tank — and secure a deal!

Enter the Spotlight with PowerPoint Cameo

PowerPoint Cameo is a hidden gem, a powerful feature that allows you to seamlessly integrate your live video feed into your presentation slides.

Latest PitchZone Episode

ChatGPT Voice – A Translator in Your Pocket

For anyone who has ever wished for a universal translator à la ‘Star Trek’ – our sci-fi dreams are coming closer to reality, thanks to ChatGPT Voice.

Where to Start when Creating an Investor Pitch

Creating an investor pitch can be quite a challenge. So it’s tempting to use a pitch deck template. But there is a better way…

DEV Community

Posted on Nov 26, 2019

How do you display your code nicely (for example to present a snippet)?

Sometimes short snippets or a few important lines of code have to be presented nicely. Whether it's on a web page that doesn't actually have a function for displaying and highlighting code, or in a presentation for the next meeting. And maybe it is sometimes more important to display the code in a nice visual way, because the target group might not be able to appreciate the code itself that much.

What tools do you use for this? Do you just take a screenshot of your editor? Do you have a workflow in Photoshop an image editing program, to manually prepare the code? Or do you use (online) tools developed especially for this purpose?

Let me know in the comments 😃✍️

Top comments (2)

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

Location Mannheim, Germany
Work Senior Software Engineer, SCRUM Master
Joined Nov 14, 2017

I can recommend Carbon.now because you can

choose a theme
choose the language (or let it autodetect)
set custom colors
tweet directly
copy embed URL (speaking URLs)
copy as PNG/SVG
visit the link any time in the future and it works

Location Stuttgart, Germany
Joined Nov 19, 2019

That looks nice, thank you for this recommendation.

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

Building Custom PCs for Developers: Three Different Approaches

3a5abi 🥷 - Jun 22

Open-Source, Let's Talk About it

Antonio | CEO at Litlyx.com - Jun 19

How to Set Up Solargraph in VS Code with WSL2

Lucas Luan de Melo - Jun 21

What I Learned as a Junior Developer

Beatriz Friso - May 18

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

Copilot tutorial: Create a presentation with a prompt

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

Note: This feature is available to customers with a Copilot for Microsoft 365 (work) license.

Duration: 1 minute 14 seconds

Discover how Copilot in PowerPoint effortlessly creates captivating presentations in just a few prompts and access the full power of Microsoft Designer to bring your ideas to life with professional graphics.

Try in PowerPoint

See more videos

Kickstart a presentation

Create a branded presentation from a file

Summarize a presentation

Browse all Copilot videos

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Microsoft 365 subscription benefits

Microsoft 365 training

Microsoft security

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

Ask the Microsoft Community

Microsoft Tech Community

Windows Insiders

Microsoft 365 Insiders

Was this information helpful?

Thank you for your feedback.

Microsoft 365 Life Hacks > Presentations > How to introduce yourself in a presentation

How to introduce yourself in a presentation

A well-executed presentation should captivate your audience and listeners. The first step to gaining their attention is creating an engaging introduction. Learn why presentation introductions are important and how to properly execute one for your presentation.

Why are presentation introductions important?

Presentation delivery impacts your audience’s reception and listening skills. A dull delivery can deter listeners and potentially leave them disinterested. Conversely, an effective delivery can engage your audience, promote active listening, and stimulate substantive discussion.

Presentation introductions also help to establish the outline of your presentation and give the audience an idea of what is to come. Introductions play a crucial role in captivating listeners from the onset and building momentum. They address who you are, why the audience should be invested, state the topic, establish credibility, preview the main points, and establish the cadence and tone of your presentation. Before you dive into the content of your presentation, ensure you establish an effective introduction to captivate your audience.

Tell your story with captivating presentations

Powerpoint empowers you to develop well-designed content across all your devices

How to begin a presentation introduction

To establish rapport with your audience, here are some tips to effectively introduce yourself and your presentation:

Be clear and concise

A succinct introduction makes it easier for your audience to follow. Keep your introduction simple, short, and include only necessary information. State your name and topic clearly so your audience knows you from the beginning. Avoid unnecessary details or lengthy anecdotes in your introduction to keep things focused and to the point.

Provide pertinent background information

In addition to your name and topic, highlight anything else that is relevant. You can include your education, work background, qualifications, and other information. Most importantly, ensure the information you disclose is directly relevant to yourself and presentation.

Create a hook or attention getter

Once you’ve established your name and topic, create an engaging hook or attention getter. Your introduction can be funny, clever, or it can captivate your audience. Have fun creating an introduction, but be sure to align your tone and delivery to your audience.

Outline your presentation

Let your audience know what your will be discussing. Establish a roadmap of your presentation: outline your contents, topics, and main points in an easily digestible format. This makes it easier for your audience to follow your presentation and prepare for its contents.

Practice and refine

Once you’ve created a solid introduction, rehearse your introduction until the delivery is organic and smooth. Confidence is key for an optimal delivery. Speak clearly, practice eye contact, and use storytelling to engage your audience.

Be authentic

Above all, be yourself—authenticity helps you build trust and connection with your audience. Carry you character, speech, and personality into your presentation to draw in your audience.

A successful introduction establishes tone, cadence, topic, and showcases your personality. Gain your audience’s attention and effectively deliver your presentation with an effective introduction. For more ways to engage your audience and improve presentation delivery , learn more presentation tips .

Get started with Microsoft 365

It’s the Office you know, plus the tools to help you work better together, so you can get more done—anytime, anywhere.

Topics in this article

How to add citations to your presentation

Conduct research and appropriately credit work for your presentation. Understand the importance of citing sources and how to add them to your presentation.

How to work on a group presentation

Group presentations can go smoothly with these essential tips on how to deliver a compelling one.

How to create a sales presentation

Engage your audience and get them interested in your product with this guide to creating a sales presentation.

7 tips for creating and presenting a webinar

Everything you need to achieve more in less time

Get powerful productivity and security apps with Microsoft 365

Explore Other Categories

A1: Interactive Presentations

By Jazz Chapman on June 25, 2024

Interacting with Interactive Presentations is a game changer in the classroom. Whether you are teaching synchronously or asynchronously, interactive presentations help students / viewers learn more and promote active engagement.

By clicking the below link or scanning the QR code, you will be able to go through an Interactive Presentation I created for the purpose of this assignment. Please interact with each of the components as you work through it and check back later to view others’ thoughts and answers. You will be working through an Aha Slides presentation, which is one of my students’ favourite presentation applications!

Additionally, you can see the PDF of the presentation below if you can not go through the presentation through the link or QR code.

I will be posting the final results with everyone’s feedback to this forum (via PDF) at the end of the week.

If you have any questions or run into any issues, please comment or send me an email: [email protected].

Jasmine Chapman

https://ahaslides.com/J1MXK

When is the 2024 presidential debate? Date, time and how to watch Biden, Trump

President Joe Biden and former President Donald Trump are set to face off in the first presidential debate of the 2024 election Thursday, June 27.

The matchup is breaking tradition: Instead of being organized by the Commission on Presidential Debates (CPD) and presented across different networks, the candidates decided to bypass the commission and instead participate in two network-produced debates. First up is the "CNN Presidential Debate" hosted by CNN in its Atlanta studios.

This first debate will also have no live audience, unlike previous years.

Here's everything you need to know about where and when to watch the candidates' first showdown of the 2024 cycle.

When is the presidential debate?

The "CNN Presidential Debate" takes place Thursday, June 27.

What time does the presidential debate start?

The debate starts at 9 p.m. E.T.

How to watch, stream the debate

The debate will broadcast on CNN and stream on CNN.com and Max, formerly known as HBO Max.

A live stream of the "CNN Presidential Debate" will also be available on USA TODAY via YouTube .

Various other networks are offering their own coverage of the debate, including:

Fox News announced it would present “ extensive live coverage ” of the CNN presidential debate across all its platforms, including the “FOX News Democracy 2024: CNN Presidential Debate” from 9–11 p.m. E.T.
ABC News will show “The Race for the White House" and coverage of the debate on ABC, ABC News Live and Hulu on Thursday from 7 p.m. to midnight.
Other networks, such as NewsNation , will show the debate with pre and post-debate analysis.

Who is moderating the debate?

CNN anchors Jake Tapper and Dana Bash will moderate the in-studio debate.

Quarto will use Pandoc to automatically generate citations and a bibliography in a number of styles. To use this capability, you will need:

A quarto document formatted with citations (see Citation Markdown ).

A bibliographic data source, for example a BibLaTeX ( .bib ) or BibTeX ( .bibtex ) file.

Optionally, a CSL file which specifies the formatting to use when generating the citations and bibliography (when not using natbib or biblatex to generate the bibliography).

Bibliography Files

Quarto supports bibliography files in a wide variety of formats including BibLaTeX and CSL. Add a bibliography to your document using the bibliography YAML metadata field. For example:

You can provide more than one bibliography file if you would like by setting the bibliography field’s value to a YAML array.

See the Pandoc Citations documentation for additional information on bibliography formats.

Citation Syntax

Quarto uses the standard Pandoc markdown representation for citations (e.g. [@citation] ) — citations go inside square brackets and are separated by semicolons. Each citation must have a key, composed of ‘@’ + the citation identifier from the database, and may optionally have a prefix, a locator, and a suffix. The citation key must begin with a letter, digit, or _ , and may contain alphanumerics, _ , and internal punctuation characters ( :.#$%&-+?<>~/ ). Here are some examples:

Markdown Format	Output (default)	Output( , see )
	Blah Blah (see ; also )	Blah Blah see [1], pp. 33-35; also [1], chap. 1
	Blah Blah ( and passim)	Blah Blah [1], pp. 33-35, 38-39 and passim
	Blah Blah ( ; ).	Blah Blah [1, 2].
	Wickham says blah ( )	Wickham says blah [1]

You can also write in-text citations, as follows:

Markdown Format	Output (author-date format)	Output (numerical format)
	Knuth ( ) says blah.	[1] says blah.
	Knuth ( ) says blah.	[1] [p. 33] says blah.

See the Pandoc Citations documentation for additional information on citation syntax.

Citation Style

Quarto uses Pandoc to format citations and bibliographies. By default, Pandoc will use the Chicago Manual of Style author-date format, but you can specify a custom formatting using CSL ( Citation Style Language ). To provide a custom citation stylesheet, provide a path to a CSL file using the csl metadata field in your document, for example:

You can find CSL files or learn more about using styles at the CSL Project . You can browse the list of more than 8,500 Creative Commons CSL definitions in the CSL Project’s central repository or Zotero’s style repository .

CSL styling is only available when the cite-method is citeproc (which it is by default). If you are using another cite-method , you can control the formatting of the references using the mechanism provided by that method.

Bibliography Generation

By default, Pandoc will automatically generate a list of works cited and place it in the document if the style calls for it. It will be placed in a div with the id refs if one exists:

If no such div is found, the works cited list will be placed at the end of the document.

If your bibliography is being generated using BibLaTeX or natbib ( Section 7 ), the bibliography will always appear at the end of the document and the #refs div will be ignored.

You can suppress generation of a bibliography by including suppress-bibliography: true option in your document metadata

Here’s an example of a generated bibliography:

Including Uncited Items

If you want to include items in the bibliography without actually citing them in the body text, you can define a dummy nocite metadata field and put the citations there:

In this example, the document will contain a citation for item3 only, but the bibliography will contain entries for item1 , item2 , and item3 .

It is possible to create a bibliography with all the citations, whether or not they appear in the document, by using a wildcard:

Using BibLaTeX or natbib

When creating PDFs, you can choose to use either the default Pandoc citation handling based on citeproc, or alternatively use natbib or BibLaTeX . This can be controlled using the cite-method option. For example:

The default is to use citeproc (Pandoc’s built in citation processor).

See the main article on using Citations with Quarto for additional details on citation syntax, available bibliography formats, etc.

When using natbib or biblatex you can specify the following additional options to affect how bibliographies are rendered:

Option	Description
biblatexoptions	List of options for biblatex
natbiboptions	List of options for natbib
biblio-title	Title for bibliography
biblio-style	Style for bibliography

Help | Advanced Search

Mathematics > Group Theory

Title: short presentations for transformation monoids.

Abstract: Due to the theorems of Cayley and Vagner-Preston, the full transformation monoids and the symmetric inverse monoids play analogous roles in the theory of monoids and inverse monoids, as the symmetric group does in the theory of groups. Every presentation for the finite full transformation monoids $T_n$, symmetric inverse monoids $I_n$, and partial transformation monoids $PT_n$ contains a monoid presentation for the symmetric group. In this paper we show that the number of relations required, in addition to those for the symmetric group, for each of these monoids are at least $4$, $3$, and $8$, respectively. We also give presentations for: $T_n$ with $4$ additional relations when $n$ is odd and $n\geq 5$; and $5$ additional relations for all $n\geq 4$; for $I_n$ with $3$ additional relations for all $n \geq 3$; and for $PT_n$ with $9$ relations for all $n\geq 4$. The presentations for $T_n$ and $I_n$ answer open problems in the literature.

Comments:	27 pages, 1 figure
Subjects:	Group Theory (math.GR)
classes:	20M20, 20M05
Cite as:	[math.GR]
	(or [math.GR] for this version)
	Focus to learn more arXiv-issued DOI via DataCite

Submission history

Access paper:.

HTML (experimental)
Other Formats

References & Citations

Google Scholar
Semantic Scholar

BibTeX formatted citation

Bibliographic and Citation Tools

Code, data and media associated with this article, recommenders and search tools.

Institution

arXivLabs: experimental projects with community collaborators

arXivLabs is a framework that allows collaborators to develop and share new arXiv features directly on our website.

Both individuals and organizations that work with arXivLabs have embraced and accepted our values of openness, community, excellence, and user data privacy. arXiv is committed to these values and only works with partners that adhere to them.

Have an idea for a project that will add value for arXiv's community? Learn more about arXivLabs .

IMAGES

How to Code Presentation Template
Embed Code in PowerPoint Slide with Carbon.now
How to Code Presentation Template
3 Visual Studio Code Extensions for Programming/Code Presentations
How to Make Beautiful Code Presentations in 2023
How to Make Beautiful Code Presentations

VIDEO

Create Stunning PPTs FREE with AI: A New Method!
#ChatGPT can help make entire PowerPoint presentations
A New Way To Use ChatGPT To Create PowerPoint Presentations WITHOUT Design Ideas (Designer)
Level Up Your Presentations: How to Enable VBA Macros in PowerPoint (2024)
Another day Another coding journey 📗#code #coding #dsa #leetcode #coder #subscribe
Code Security Reinvented: Navigating the era of AI

COMMENTS

snappify
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. Learn more. 💡 Share interactive slides so your viewers can easily copy code snippets and interact with links.
SlidesCodeHighlighter
SlidesCodeHighlighter. For best results, copy from Safari with Keynote decks and from Chrome with Google Slides decks. Set your background color to: #F5F5F5.
How can I embed programming source code in Powerpoint slide and keep
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.
How to Make Beautiful Code Presentations
This video answers the most common question I get on my channel: how do I make my code animations / presentations? This video answers that question with a be...
Slidev 101: Coding presentations with Markdown
Code your presentations with Slidev on GitHub. Before diving into Slidev, I should mention that coding your presentation slides isn't a new concept. Patrick Debois, also known as the father of DevOps, reviewed this concept in his blog post analyzing different concepts as code.
Top 10 JavaScript frameworks to create presentation slides
Code Surfer (6.3k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.
Transform Your Presentations from Boring to Amazing: 5 Syntax ...
Code Syntax Highlighter Figma plugin. Code Syntax Highlighter has both an editor or the ability to convert existing text into a pre-formatted code snippet frame, allowing you to either export in any Figma-supported format, or manipulate and copy the text as needed.. Summary. Tools like these are great productivity hacks when you're putting together sexy decks, presentations, or even ...
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.
The HTML presentation framework
Create Stunning Presentations on the Web. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your ...
Awesome presentations deserve beautiful code
Awesome presentations deserve beautiful code. January 20, 2022. Occasionally we need to put parts of our source code onto slides for presentations. The common presentation programs (such as PowerPoint or Keynote) fail miserably at this task because they interpret code as normal text. Syntax highlighting is lost, as are indentations.
How To Format A Block of Code Within a Presentation?
It highlights a block of code in Slides presentation. Supports a wide variety of syntaxes (React, Vue, C++, Go etc.) & offers the most popular themes on the market (VS Code, Cobalt, One Dark etc.) - Vladimir Mikulic. Oct 8, 2020 at 14:10. use Visual Studio Code for the Web "vscode.dev" and just copy paste or just copy paste from local VS Code.
How to Give a Killer Presentation With VS-Code
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.
PowerPoint: Inserting Source Code with Syntax Highlighting
Of course, it should look nice and have syntax highlighting. This is not an easy feat. There are several options for showing code on your slides: You can use a presentation software that can manage source code highlighting out of the box, e.g. Reveal.js or the LaTeX beamer package. You can convert the code to an image via Carbon or Codeimg.
How to efficiently write/code your presentation slides
Like in any markdown file you'd be able to add code from any scripting language and it will syntax highlight it for you making your presentations more standard and you'd never paste screenshot of code in your presentations again. Syntax Highlighting. --- # Simple React Component ```jsx. const HelloMessage = () => {.
Create Presentations with Markdown
Integration with Visual Studio Code: Marp seamlessly integrates with the popular Visual Studio Code editor, providing real-time previews and a smooth workflow for creating and editing presentations.
Add beautiful source code examples with Carbon in your presentations
Using Powerpoint Objects (Insert > Object > Create new). Select Microsoft Word Document and paste the code. Using tools like Notepad++ (Window users). From Notepad++, select all your code and from menu use Plugin commands and Copy Text with Syntax Highlighting. Paste it with the option Keep Source Formatting into MS Word.
How to add good looking code snippets in presentations, documentations
It is quite a challenge to add good looking code snippets documentations, presentations or books. When adding code in documentation, the classic move is to take a screenshot, use tool X to add extra pictogram to the code, and upload a picture and hope for the best that there is no bug in our example.
AI Powerpoint
Create a working presentation or document you can refine and customize in under a minute. Sign up for free and turn your ideas into life with Gamma. Gamma allows me to package up information in ways I can't with slides, while still creating good flow for my presentations. A new medium for presenting ideas, powered by AI.
Free templates about Programming for Google Slides & PPT
Download the All About Programming in Java presentation for PowerPoint or Google Slides. High school students are approaching adulthood, and therefore, this template's design reflects the mature nature of their education. Customize the well-defined sections, integrate multimedia and interactive elements and allow space for research or group ...
How to absolutely ace developer presentations
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!
Good font for code presentations?
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. answered Jun 21, 2009 at 12:14. Pontus Gagge. 17.2k 1 40 51.
How to Create Beautiful HTML & CSS Presentations with WebSlides
Getting Started with WebSlides. To get started, first download WebSlides. Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder ...
Create Beautiful PowerPoint Slides with ChatGPT and VBA
In case you're having trouble with the code, here is the snippet that worked for me: Sub CreatePitchPresentation() Dim PowerPointApp As Object Dim Presentation As Object Dim Slide As Object ' Open PowerPoint Set PowerPointApp = CreateObject("PowerPoint.Application") PowerPointApp.Visible = True ' Create a new presentation Set Presentation = PowerPointApp.Presentations.Add ' Slide 1 ...
How do you display your code nicely (for example to present a snippet)?
Whether it's on a web page that doesn't actually have a function for displaying and highlighting code, or in a presentation for the next meeting. And maybe it is sometimes more important to display the code in a nice visual way, because the target group might not be able to appreciate the code itself that much.
Copilot tutorial: Create a presentation with a prompt
Duration: 1 minute 14 seconds. Discover how Copilot in PowerPoint effortlessly creates captivating presentations in just a few prompts and access the full power of Microsoft Designer to bring your ideas to life with professional graphics.
How to introduce yourself in a presentation
Outline your presentation. Let your audience know what your will be discussing. Establish a roadmap of your presentation: outline your contents, topics, and main points in an easily digestible format. This makes it easier for your audience to follow your presentation and prepare for its contents. Practice and refine
A1: Interactive Presentations
Interacting with Interactive Presentations is a game changer in the classroom. Whether you are teaching synchronously or asynchronously, interactive presentations help students / viewers learn more and promote active engagement. By clicking the below link or scanning the QR code, you will be able to go through an Interactive Presentation I created for the purpose […]
Presidential debate: When is it? Date, time, how to watch
Fox News announced it would present "extensive live coverage" of the CNN presidential debate across all its platforms, including the "FOX News Democracy 2024: CNN Presidential Debate" from ...
Citations
See the Pandoc Citations documentation for additional information on bibliography formats.. Citation Syntax. Quarto uses the standard Pandoc markdown representation for citations (e.g. [@citation]) — citations go inside square brackets and are separated by semicolons.Each citation must have a key, composed of '@' + the citation identifier from the database, and may optionally have a ...
[2406.19294] Short presentations for transformation monoids
View a PDF of the paper titled Short presentations for transformation monoids, by James D. Mitchell and Murray T. Whyte View PDF HTML (experimental) Abstract: Due to the theorems of Cayley and Vagner-Preston, the full transformation monoids and the symmetric inverse monoids play analogous roles in the theory of monoids and inverse monoids, as ...

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

Create next-level presentations

Elevate your Technical Content

Simplify your Education

Embed Interactive Infographics

User Stories

Unleash your design potential with our powerful editor

Add custom images

Highlight your code in different ways

Manage your code snippets in one place

Wanna stay up-to-date?

Our Mission

Create your next presentation

Stack Exchange Network

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

11 Answers 11

You must log in to answer this question.

Hot Network Questions

Top 10 JavaScript frameworks to create presentation slides

Common features

You might also like

Code Presentation Tips

Know Your Tools #

General-purpose text editors #

Online tools #

Prepare Format & Highlight Presets #

Have Dark And Light Presets #

Choose Suitable Language #

Keep It Short #

Useful Links #

The HTML Presentation Framework

Hello There

Vertical Slides

Basement Level 1

Basement Level 2

Pretty Code

Even Prettier Animations

Auto-Animate

Touch Optimized

Fragment Styles

Transition Styles

Slide Backgrounds

Image Backgrounds

Iframe Backgrounds

Marvelous List

Fantastic Ordered List

Tabular Tables

Clever Quotes

Intergalactic Interconnections

Speaker View

Export to PDF

Global State

State Events

Take a Moment

Create Stunning Presentations on the Web

Ready to Get Started?

Online Editor

Supporting reveal.js

Awesome presentations deserve beautiful code

Ever seen ugly source code on a slide?

Nice’n Easy

Predefines themes

Additional Layout Options

Export to png and svg

Alternatives

But: Accessibility Issues

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

Better Live Coding

VS-Code Themes

Presentation Mode

10 Great Visual Studio Extensions For 2021

10 Hidden Out The Box Visual Studio 2022 Features!

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

Best ChatGPT Extension For Visual Studio Code in 2023?

Best VS-Code Extensions and Themes From 2022

Best VsCode API Client? Postman Vs Thunderclient Vs Rest Client

Create An Army Of Virtual Pets Inside VSCode

Ditch Postman... API Testing In Visual Studio Code

Easy Node Dependency Management In Vs-Code

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