Share via

VS Code displayed on webpage as text rather than picture

Dean Everhart 1,536 Reputation points
2023-03-23T15:29:54.3766667+00:00

If I want to display code...as it appears as code in Visual Studio (e.g. below) but on a web page as text, is there any way of doing that?

If I place the code between <p> </p> tags, I get: Element 'html' cannot be nested inside element 'p'.

The workaround is to get screen captures, but I was hoping to avoid the trouble and file size of doing it this way.

User's image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Contoso University</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Contoso University</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="About">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Students" asp-action="Index">Students</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Courses" asp-action="Index">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Instructors" asp-action="Index">Instructors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Departments" asp-action="Index">Departments</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - Contoso University - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,504 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,450 questions
0 comments
Accepted answer
  1. AgaveJoe 28,031 Reputation points
    2023-03-23T16:56:34.96+00:00

    as it appears as code in Visual Studio (e.g. below) but on a web page as text, is there any way of doing that?

    HTML has the <code> tag. There's also <pre>.

    https://www.w3schools.com/tags/tag_code.asp

    If you want colors and font formatting like an editor then find a CSS template on the internet. If you are asking about this forum then click on the "Select development language" -> start typing -> select the language.

    Capture

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 63,746 Reputation points
    2023-03-23T17:42:55.0566667+00:00

    the <code> is styled like the <pre> but to display html code, you need to encode special characters

    <code>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;@ViewData[&quot;Title&quot;] - Contoso University&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/site.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;nav class=&quot;navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;a class=&quot;navbar-brand&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Index&quot;&gt;Contoso University&lt;/a&gt;
                &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot; aria-controls=&quot;navbarSupportedContent&quot;
                        aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;div class=&quot;navbar-collapse collapse d-sm-inline-flex justify-content-between&quot;&gt;
                    &lt;ul class=&quot;navbar-nav flex-grow-1&quot;&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Index&quot;&gt;Home&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;About&quot;&gt;About&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Students&quot; asp-action=&quot;Index&quot;&gt;Students&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Courses&quot; asp-action=&quot;Index&quot;&gt;Courses&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Instructors&quot; asp-action=&quot;Index&quot;&gt;Instructors&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Departments&quot; asp-action=&quot;Index&quot;&gt;Departments&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;main role=&quot;main&quot; class=&quot;pb-3&quot;&gt;
            @RenderBody()
        &lt;/main&gt;
    &lt;/div&gt;

    &lt;footer class=&quot;border-top footer text-muted&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
            &amp;copy; 2020 - Contoso University - &lt;a asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Privacy&quot;&gt;Privacy&lt;/a&gt;
        &lt;/div&gt;
    &lt;/footer&gt;
    &lt;script src=&quot;~/lib/jquery/dist/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;~/lib/bootstrap/dist/js/bootstrap.bundle.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;~/js/site.js&quot; asp-append-version=&quot;true&quot;&gt;&lt;/script&gt;
    @await RenderSectionAsync(&quot;Scripts&quot;, required: false)
&lt;/body&gt;
&lt;/html&gt;
</code>

    there are online tools to do the encoding. the color highlighting is typically done with a javascript library:

    • PrismJS
    • HighlightJS (used by this site)
    • Rainbow
    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.