adding javascript snippets to show code i wrote, not to actually run javascript

jowheeler90 · Member · Jun 16, 2016 at 8:29 pm

I want to add the following into my wordpress.com blog. But when I do, it runs the code. How can I show this code word for word on my page (I do not want it to run).

<h2>Intro to HTML & CSS >> Bootstrap and Other Frameworks >> Quiz: A Small Taste of Interactivity</h2>

I could not get the modal to work with the code provided within this exercise.

You can check your page within Chrome Developer Tools. Under the ‘Console’ tab, it should mention if your page load had errors. Mine were that my Jquery version was 3.0.0, which the Bootstrap Modal only worked with Jquery versions BELOW 3.0.0. I realized at the end of the day my js/bootstrap.min.js file was the culprit. The button would display and be clickable, but, when clicked, no modal showed up.

So I used code from w3schools.com Bootstrap Modals as a model. I suggest checking the page out its short and sweet and to the point. You also get to ‘Try it Out: within their page for even more clarity. Here it is:

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Bootstrap Example</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</head>
<body>

<div class='container'>
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal'>Open Modal</button>

  <!-- Modal -->
  <div class='modal fade' id='myModal' role='dialog'>
    <div class='modal-dialog'>

      <!-- Modal content-->
      <div class='modal-content'>
        <div class='modal-header'>
          <button type='button' class='close' data-dismiss='modal'>×</button>
          <h4 class='modal-title'>Modal Header</h4>
        </div>
        <div class='modal-body'>
          <p>Some text in the modal.</p>
        </div>
        <div class='modal-footer'>
          <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

The blog I need help with is: (visible only to logged in users)

timethief · Member · Jun 16, 2016 at 8:36 pm
Copy link
We have code restrictions here at wordpress.COM and JavaScript will be stripped out by the software. https://en.support.wordpress.com/code/
https://en.support.wordpress.com/code/#html-tags
https://en.support.wordpress.com/code/#javascript

Otherwise, see here for posting source code: https://en.support.wordpress.com/code/posting-source-code/
danielancines · Member · Jun 16, 2016 at 8:39 pm
Copy link
Hi, how are you?

Unfortunately WordPress.com site doesn’t allow you to use javascript, for further information please check the link below:

Add Code to Your Site
timethief · Member · Jun 16, 2016 at 8:40 pm
Copy link
@danielancines
Thanks but you have to be traveling at WARP speed to beat me. lol :D
jowheeler90 · Member · Jun 16, 2016 at 8:43 pm
Copy link
Thank you, I understand that I cannot run JS scripts within wordpress.com websites. However, I think you are misunderstanding.

I do not want to run the script.

I want to show the reader the actual script’s text, to show the code I wrote.

For instance, I can write an html snippet with
tags:
```
<html><body>SOME HTML HERE THAT DOES NOT RUN BUT INSTEAD IS SHOWN EXACTLY AS IT IS WRITTEN SO OTHERS CAN READ THE HTML AS TEXT</html></body>
```
How do I do this with Javascript code snippets?
jowheeler90 · Member · Jun 16, 2016 at 8:45 pm
Copy link
geez i cant even use pre tags to explain what i am doing…

its not show but the <html> tag was preceded by a
```
 tag, the ended w a 
```
tag. i basically need
```
 tags for writing javascript within them. If you know what 
```
```
 tags do, then you may be able to answer this question. Thank you
```
timethief · Member · Jun 16, 2016 at 8:45 pm
Copy link
Otherwise, see here for posting source code: https://en.support.wordpress.com/code/posting-source-code/
jowheeler90 · Member · Jun 16, 2016 at 8:45 pm
Copy link
tag = pre tag
timethief · Member · Jun 16, 2016 at 8:46 pm
Copy link
If you do not succeed type modlook into the sidebar tags on this thread for a Staff follow-up. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then subscribe to this thread so you are notified when they respond and be patient while waiting. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
jowheeler90 · Member · Jun 16, 2016 at 9:03 pm
Copy link
Is there anyway to write [code] [/code] within this box?
jowheeler90 · Member · Jun 16, 2016 at 9:05 pm
Copy link
Yes looks like it. Thank you I did figure it out. For the future, I would suggest simply saying to wrap the code with these tags

[code]

[/code]

and to see https://en.support.wordpress.com/code/posting-source-code/ for info on posting source code (which is what I was asking, but did not know the name was “source code”, so got confused when you posted this link).

Thanks!

The topic ‘adding javascript snippets to show code i wrote, not to actually run javascript’ is closed to new replies.

adding javascript snippets to show code i wrote, not to actually run javascript

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media