CODEWITHSUNDEEP
c#idecomments
Alex Chen
Alex Chen

Reputation: 675

Is it possible insert image to a code comment?

My question is probably an insane idea, however, it's very valuable when I write code for educational purpose.

Especially when the code is relevant to math and physics, images inserted in comment are more convenient and articulated.

Until now, I can't find a way succeed to insert a true image into comment, not C# nor python or any other common programming language or IDE.

Using tools that convert images to ASCII image is a workaround but less precise.

Any idea is appreciated

Upvotes: 42

Views: 13797

Answers (11)

gear
gear

Reputation: 421

Since I always wanted to have this solution myself, I just created a VS Code extension. I hope it meets your needs, although VS Code doesn't allow inline images. But I found the tooltip solution even more practical:

https://marketplace.visualstudio.com/items?itemName=mgiesen.image-comments

Upvotes: 1

Georges
Georges

Reputation: 21

I had the same Idea and wanted to check if someone already shared it.

I just did it one way: Wordpad -> wrote code with an image between /* */ and saved as text document: images removed. just an empty comment zone remaining.

Of course, many interesting possibilities are missing from such an editor. But all that is needed would be to allow a better suited one to include images.

It could greatly speed up the understanding of code if visual elements are involved.

Upvotes: 2

tomasofen
tomasofen

Reputation: 1420

I politely disagree with @thekip reply. IDE is not just the editor, but a full set of tools, and thank God code editors has been evolving from the old times. That’s why:

Eons ago I was amazed with the AMOS developer tool for old AMIGA computers, that had the fold/unfold capability you can see now in many code editors, and during many years I was asking myself why Borland and Microsoft tools didn’t had it. It’s clear that information should not be always at the same level.

Code editors already had automatic text styling, to see different kind of reserved words or comments in different colors, allow auto indentation, and so.

Comments in code is an a topic in discussion out there, with some people defending that maintaining them under minims is the way to follow, arguing that they are usually not maintained by developers as they change code. People like me disagree with that, having in mind that comments are part of the code.

Not always all comments have the same importance, and 2020 tools should provide something better than UPERCASE and a bunch of dash separators ----------

Allow different font size, bold and italic in comments is the “must have” we will have again some eons later, and sometimes an image diagram in the same code could save you many time of search in the appropriate project documentation. Google Collab and other Jupyter tools seems to finally understood that.

All this should not replace project documentation through other tools, of course but, hey, do other people’s lives easier.

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

John Woods

@Simon Mourier reply for Visual Studio, rocks!

Upvotes: 4

rahul agarwal
rahul agarwal

Reputation: 15

Actually,you can always include the link of the image but cannot add an image to the comment of the code.

Upvotes: 0

JWP
JWP

Reputation: 6963

Using Sandcastle

Each SHFB project is it's own container for everything seen in the documentation project. When it's compiled, the (program project's") XML doc is pulled into SHFB to be put into the document.

If you want to show images in the top section of the class documentation, you must add the image to the SHFB project and refer to that image from the code comment. See Problem 2...

Problem 1:

"I can't get an image to show from a conceptual topic using the 'image' tag"

  1. Make sure to use the proper XML markup similar to this: 

    <section>
  <content>        
    <mediaLink>
       <image xlink:href="MyMainImage"/>
    </mediaLink>
  </content>
</section>

  2. Notice that the Href (above) doesn't have the file type associated,
    this is because Sandcastle wants the ID instead.

  3. Add the image to the project using the default media folder. Or, if you want you can create your own folder e.g Images.
  4. Go to properties page of the image and set Build action to Image. When you use an "image" tag, SHFB only uses the Image ID found in the properties page, seen in the HREF above.
  5. Recompile the project and open up the CHM file and you will see the image.

Problem 2:

"I cannot get an Image to show using Code commenting XML markup in the programming project".

  1. In the summary section of the code comment, the markup can look like this:

    /// <summary>   
/// <remarks><img src="\Images\MyImage.PNG"/></remarks>
/// </summary>

  2. Note that the src attribute does contain the file type. It also must correctly identify the folder that your SHFB project has for that image.

  3. After adding that image to the SHFB right click on it and change the "Build Action" property to Content

Happy coding and documenting! Thanks goes to Eric W.

Keywords: SHFB Cannot Add Image Sandcastle Help File Builder Conceptual Topic Images Code Commenting Images CHM File Images How to add an image in XML Code Commenting C#

Upvotes: 3

asaf92
asaf92

Reputation: 1865

For Python you can use Google Colab. Inside a text-block you can write something like:

![Alt text](https://someurl.com/image.png).

Example: enter image description here

For C# you can try this plug-in:

https://marketplace.visualstudio.com/items?itemName=MsBishop.ImageComments

Upvotes: 5

Marius
Marius

Reputation: 1679

I found Jupyter Notebooks very valuable for teaching and used them with Python. They let you combine text, images and code.

Microsoft announced Jupyter Notebooks for .NET core and it is now in Preview in the .NET Interactive repo.

Upvotes: 2

Andrey Regentov
Andrey Regentov

Reputation: 3737

Why don't use a free image hosting like http://imgur.com and insert image link to code comment?

Then the only problem for a student would be to copypaste link to browser from any IDE. Quite easy though.

Maybe some IDEs have the ability to "underline" links so that you can click it instead of copypasting.

Upvotes: 1

tripleee
tripleee

Reputation: 189618

Literate Programming tools work this way; you basically use TeX or something to write the code, then run a preprocessor which extracts the code snippets into an intermediate source file. http://en.wikipedia.org/wiki/Literate_programming

Upvotes: 3

Simon Mourier
Simon Mourier

Reputation: 139065

There is an example here that extend the Visual Studio 2010 editor: Image Insertion (but it's tied to Visual Studio, not a generic solution)

Upvotes: 21

thekip
thekip

Reputation: 3768

I think you're using the wrong tool for your problem. An IDE is a 'development' environment so it's not very important to have complete control over styling.

I would use something else (like LaTeX, see the comment) for you presentation.

Upvotes: 0

Related Questions